The document provides a comprehensive introduction to HTML (Hypertext Markup Language), detailing its structure, elements, and attributes used for creating web pages. It covers basic tags, formatting, links, images, and styles, along with practical steps for writing and saving HTML code. Additionally, it explains the significance of various HTML elements such as headings, paragraphs, and lists, and how to use attributes to enhance web content.
The document provides a comprehensive introduction to HTML (Hypertext Markup Language), detailing its structure, elements, and attributes used for creating web pages. It covers basic tags, formatting, links, images, and styles, along with practical steps for writing and saving HTML code. Additionally, it explains the significance of various HTML elements such as headings, paragraphs, and lists, and how to use attributes to enhance web content.
The document provides a comprehensive introduction to HTML (Hypertext Markup Language), detailing its structure, elements, and attributes used for creating web pages. It covers basic tags, formatting, links, images, and styles, along with practical steps for writing and saving HTML code. Additionally, it explains the significance of various HTML elements such as headings, paragraphs, and lists, and how to use attributes to enhance web content.
The document provides a comprehensive introduction to HTML (Hypertext Markup Language), detailing its structure, elements, and attributes used for creating web pages. It covers basic tags, formatting, links, images, and styles, along with practical steps for writing and saving HTML code. Additionally, it explains the significance of various HTML elements such as headings, paragraphs, and lists, and how to use attributes to enhance web content.
Download as PPTX, PDF, TXT or read online from Scribd
Download as pptx, pdf, or txt
You are on page 1/ 22
HTML (Hypertext MarkUP
Language)
Prepared By Zerihun Tsegaye
Contents HTML Introduction HTML Editors HTML Forms HTML Basic HTML Forms HTML Elements HTML Form Attributes HTML Attributes HTML Form Elements HTML Headings HTML Input Types HTML Paragraphs HTML Input Attributes HTML Styles HTML Input Form Attributes HTML Formatting HTML Quotations HTML Graphics HTML Comments HTML Canvas HTML Colors HTML SVG HTML Links HTML Images HTML Tables HTML Lists What is It? What is HTML
HTML is standard markup language for creating Web
pages HTML stands for Hypertext Markup Language HTML describes the s structure of Web pages using markup HTML elements are represented by tags Allow to embed other scripting languages to manipulate design layout, text and graphics Define tags <html><body> <head>….etc Browsers do not display the HTML tags, but use them to render the content of the page Browser – A software program which is used to show web pages What we can do? With HTML you can create your own website HTML is easy to learn Tools- HTML Editors Step 1: Open Notepad (PC) Notepad Windows 7 or earlier: Open Start > Programs > Accessories > Notepad Windows 10 Open Start > Programs > Window Accessories > Notepad Or Search Type Notepad. Step 2: Write Some HTML Step 3: Save the HTML Page Create a folder Save the file on your computer. Select File > Save as in the Notepad menu. Name the file "index.htm"
Tip: You can use either .htm or .html as file extension. There is no difference, it is up to you. Step 4: View the HTML Page in Your Browser Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with"). The result will look much like this: Title Heading
Body Basics Tags Codes enclosed in brackets Usually paired <TITLE>My Web Page</TITLE> Not case sensitive <TITLE> = <title> = <TITLE> Basic tags <html> <heading> <title></title> </heading> <body> </body> </html> Continued… Paragraph tag syntax <p> </p> New line tag <br> to cut the line Centering Content tag <center></center> Horizontal Lines <hr>
HTML –Elements Html Tags <> </> Elements <html></html> <heading></heading> <title></title> <body> </body> HTML Headings HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading:
Example <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> HTML Paragraphs HTML paragraphs are defined with the <p> tag Example <p>This is a paragraph.</p> <p>This is another paragraph.</p> HTML Links HTML links are defined with the <a> tag: Example <a href="https://www.w3schools.com">This is a link</a> The link's destination is specified in the href attribute. Attributes are used to provide additional information about HTML elements. HTML Images HTML images are defined with the <img> tag. The source file (src), alternative text (alt), width, and height are provided as attributes: img src="w3schools.jpg" alt="W3Schools.com" width="104" height="14 2">: HTML Elements The HTML element is everything from the start tag to the end tag: <tagname>Content goes here...</tagname> Examples of some HTML elements: <h1>My First Heading</h1> <p>My first paragraph.</p> Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none
Note: Some HTML elements have no content (like the <br>
element). These elements are called empty elements. Empty elements do not have an end tag! Nested HTML Elements HTML Bb elements can be nested (this means that elements can contain other elements). All HTML documents consist of nested HTML elements. The following example contains four HTML elements (<html>, <body>, <h1> and <p>): Example <!DOCTYPE html> <html> <heading><title></title></heading> <body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body> </html> Try it Your HTML Attributes HTML attributes provide additional information about HTML elements. All HTML elements can have attributes Attributes provide additional information about elements Attributes are always specified in the start tag Attributes usually come in name/value pairs like: name="value“ The href Attribute The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to: Example <a href="https://www.w3schools.com">Visit W3Schools</a> The src Attribute The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed: Example <img src="img_girl.jpg"> The width and height Attributes The <img> tag should also contain the width and height attributes, which specifies the width and height of the image (in pixels):
Example <img src="img_girl.jpg" width="500" height="600"> The alt Attribute The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to slow connection, or an error in the src attribute, or if the user uses a screen reader. Example <img src="img_girl.jpg" alt="Girl with a jacket">
The style Attribute
The style attribute is used to add styles to an element, such as color, font, size, and more. Example <p style="color:red;">This is a red paragraph.</p> The title Attribute The title attribute defines some extra information about an element. The value of the title attribute will be displayed as a tooltip when you mouse over the element: Example <p title="I'm a tooltip">This is a paragraph.</p>
TipsThe HTML standard does not require lowercase attribute names.
The title attribute (and all other attributes) can be written with uppercase or lowercase like title or TITLE. Single or Double Quotes? Double quotes around attribute values are the most common in HTML, but single quotes can also be used. In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes: HTML Headings HTML headings are titles or subtitles that you want to display on a webpage. HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading.
Example Example Heading 1 h1>Heading 1</h1> <
Heading 2 <h2>Heading 2</h2>
Heading 3 <h3>Heading 3</h3>
Heading 4 <h4>Heading 4</h4> Heading 5 <h5>Heading 5</h5> Heading 6 <h6>Heading 6</h6> HTML Paragraphs A paragraph always starts on a new line, and is usually a block of text.
The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph. Example <p>This is a paragraph.</p> <p>This is another paragraph.</p>
HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule. The <hr> element is used to separate content (or define a change) in an HTML page: Example <h1>This is heading 1</h1> <p>This is some text.</p> <hr> <h2>This is heading 2</h2> <p>This is some other text.</p> <hr> 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 paragraph<br>with line breaks.</p>
HTML Styles The HTML style attribute is used to add styles to an element, such as color, font, size, and more. Example I am Red I am Blue
I am Big The HTML Style Attribute Setting the style of an HTML element, can be done with the style attribute. The HTML style attribute has the following syntax: <tagname style="property:value;"> Background Color The CSS background-color property defines the background color for an HTML element. Example Set the background color for a page to powderblue: <body style="background-color:powderblue;">
<h1>This is a heading</h1> <p>This is a paragraph.</p>
</body> Fonts The CSS color property defines the text color for an HTML element: Example <h1 style="color:blue;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p> Text Size The CSS font-size property defines the text size for an HTML element: Example <h1 style="font-size:300%;">This is a heading</h1> <p style="font-size:160%;">This is a paragraph.</p> Text Alignment The CSS text-align property defines the horizontal text alignment for an HTML element: Example <h1 style="text-align:center;">Centered Heading</h1> <p style="text-align:center;">Centered paragraph.</p> HTML Text Formatting HTML contains several elements for defining text with a special meaning. Example This text is bold This text is italic This is subscript and superscript HTML Formatting Elements Formatting elements were designed to display special types of text: •<b> - Bold text •<small> - Smaller text •<strong> - Important text •<ins> - Inserted text •<i> - Italic text •<sub> - Subscript text •<em> - Emphasized text •<sup> - Superscript text •<mark> - Marked text The HTML <b> element defines bold text, without any extra importance. Example <b>This text is bold</b>
