Html
1 like219 views
The document is a tutorial on HTML (Hyper Text Markup Language), explaining its structure, including tags, headings, and paragraphs. It outlines how to create and save an HTML document using Notepad and provides examples of common HTML tags, including container and empty tags. Additionally, it describes the purpose of specific tags and their use in constructing web pages.
Html
- 1. TRINITY INSTITUTE OF PROFESSIONAL STUDIES Sector – 9, Dwarka Institutional Area, New Delhi-75 Affiliated to Institution of G.G.S.IP.U, Delhi HTML BBA 208 Ruchika Bajaj Assistant Professor
- 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.