HTML- Hyper Text Markup Language
Download as PPTX, PDF1 like663 views
The document discusses HTML (Hypertext Markup Language) and how to write HTML code using Notepad. It provides examples of basic HTML tags like <html>, <head>, <title>, <body>, <h1>, <p>, and <br>. It explains that HTML tags come in pairs, with a start and end tag. The document also discusses how to save an HTML file and introduces container tags and empty tags.
HTML- Hyper Text Markup Language
- 1. TRINITY INSTITUTE OF PROFESSIONAL STUDIES Sector – 9, Dwarka Institutional Area, New Delhi-75 Affiliated Institution of G.G.S.IP.U, Delhi HTML BBA CA 208 By : Ruchika Bajaj Assistant Professor (IT)
- 2. TRINITY INSTITUTE OF PROFESSIONAL STUDIES Sector – 9, Dwarka Institutional Area, New Delhi-75 HTML • HTML stands for Hyper Text Markup Language • It is a language with the help of which we can create your own Web site. • A markup language is a set of markup tags • HTML documents are described by HTML tags • Each HTML tag describes different document content
- 3. TRINITY INSTITUTE OF PROFESSIONAL STUDIES Sector – 9, Dwarka Institutional Area, New Delhi-75 HTML Example: Document Tag <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
- 4. TRINITY INSTITUTE OF PROFESSIONAL STUDIES Sector – 9, Dwarka Institutional Area, New Delhi-75 HTML Example The DOCTYPE declaration defines the document type to be HTML The text between <html> and </html> describes an HTML document The text between <head> and </head> provides information about the document The text between <title> and </title> provides a title for the document The text between <body> and </body> describes the visible page content The text between <h1> and </h1> describes a heading The text between <p> and </p> describes a paragraph Using this description, a web browser can display a document with a heading and a paragraph.
- 5. TRINITY INSTITUTE OF PROFESSIONAL STUDIES Sector – 9, Dwarka Institutional Area, New Delhi-75 HTML Tags • HTML tags are keywords (tag names) surrounded by angle brackets: • <tagname>content</tagname> • HTML tags normally come in pairs like <p> and </p> • The first tag in a pair is the start tag, the second tag is the end tag • The end tag is written like the start tag, but with a slash before the tag name • The start tag is often called the opening tag. The end tag is often called the closing tag.
- 6. TRINITY INSTITUTE OF PROFESSIONAL STUDIES Sector – 9, Dwarka Institutional Area, New Delhi-75 Write HTML Using Notepad or Text Edit • HTML can be edited by using a professional HTML editor like: • Adobe Dreamweaver • Microsoft Expression Web • CoffeeCup HTML Editor
- 7. TRINITY INSTITUTE OF PROFESSIONAL STUDIES Sector – 9, Dwarka Institutional Area, New Delhi-75 Step 1: Open Notepad • To open Notepad in Windows 7 or earlier: • Click Start (bottom left on your screen). Click All Programs. Click Accessories. Click Notepad. • To open Notepad in Windows 8 or later: • Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.
- 8. TRINITY INSTITUTE OF PROFESSIONAL STUDIES Sector – 9, Dwarka Institutional Area, New Delhi-75 Step 2: Write Some HTML • Write or copy some HTML into Notepad. • <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
- 9. TRINITY INSTITUTE OF PROFESSIONAL STUDIES Sector – 9, Dwarka Institutional Area, New Delhi-75
- 10. TRINITY INSTITUTE OF PROFESSIONAL STUDIES Sector – 9, Dwarka Institutional Area, New Delhi-75 Step 3: Save the HTML Page • Save the file on your computer. • Select File > Save as in the Notepad menu. • Name the file "index.htm" or any other name ending with htm.
- 11. TRINITY INSTITUTE OF PROFESSIONAL STUDIES Sector – 9, Dwarka Institutional Area, New Delhi-75
- 12. TRINITY INSTITUTE OF PROFESSIONAL STUDIES Sector – 9, Dwarka Institutional Area, New Delhi-75 HTML Paragraphs • HTML paragraphs are defined with the <p> tag: • Example <p> This paragraph contains a lot of lines in the source code, but the browser ignores it. </p>
- 13. TRINITY INSTITUTE OF PROFESSIONAL STUDIES Sector – 9, Dwarka Institutional Area, New Delhi-75 HTML Line Breaks • The HTML <br> element defines a line break. • Use <br> if you want a line break (a new line) without starting a new paragraph: • Example • <p>This is<br>a para<br>graph with line breaks</p> • Result: • This is a para graph with line breaks
- 14. TRINITY INSTITUTE OF PROFESSIONAL STUDIES Sector – 9, Dwarka Institutional Area, New Delhi-75 Container Tags • Container tags are those tags which contains content in it. • Ex : • <p> This paragraph contains a lot of lines in the source code, but the browser ignores it. </p> • Hence p tag is a container tag
- 15. TRINITY INSTITUTE OF PROFESSIONAL STUDIES Sector – 9, Dwarka Institutional Area, New Delhi-75 Empty Tag • <br > is an empty element without a closing tag (the <br> tag defines a line break). • It does not require any content in it.