What is HTML?
HTML is the standard markup language for creating Web pages.
HTML stands for Hyper Text Markup Language
HTML describes the structure of Web pages using markup
HTML elements are the building blocks of HTML pages
HTML elements are represented by tags
HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
Browsers do not display the HTML tags, but use them to render the content of the page
Basic Format
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Result:
Example Explained
The <!DOCTYPE html> declaration defines this document to be HTML5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> element specifies a title for the document
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph
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
<!DOCTYPE html><html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
Result:
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:Example
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Result:
This is a paragraph.This is another paragraph.
HTML Links
HTML links are defined with the <a> tag:Example:
<!DOCTYPE html>
<html>
<body>
<a href="https://www.facebook.com">This is a link</a>
</body>
</html>
Result:
This is a link
HTML Images
HTML images are defined with the <img> tag.The source file (src), alternative text (alt), width, and height are provided as attributes:
Example
<!DOCTYPE html>
<html>
<body>
<img src="anything.jpg" alt="anything" width="104" height="142">
</body>
</html>
Result:
HTML Attributes:
Attributes provide additional information about HTML elements.
HTML Attributes
- All HTML elements can have attributes
- Attributes provide additional information about an element
- Attributes are always specified in the start tag
- Attributes usually come in name/value pairs like: name="value"
The lang Attribute
The language of the document can be declared in the <html> tag.The language is declared with the lang attribute.
Declaring a language is important for accessibility applications (screen readers) and search engines:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
The title Attribute
Here, a title attribute is added to the <p> element. The value of the title attribute will be displayed as a tooltip when you mouse over the paragraph:Example
<!DOCTYPE html>
<html>
<body>
<h2>The title attribute</h2>
<p title="I'm a tooltip">
Mouse over this paragraph, to display the title attribute as a tooltip.
</p>
</body>
</html>
Result:
The title attribute
Mouse over this paragraph, to display the title attribute as a tooltip.
The href Attribute
HTML links are defined with the <a> tag. The link address is specified in the href attribute:Example
<!DOCTYPE html>
<html>
<body>
<a href="https://www.w3schools.com">This is a link</a>
</body>
</html>
Result:
This is a link
Size Attributes
HTML images are defined with the <img> tag.The filename of the source (src), and the size of the image (width and height) are all provided as attributes:
Example
<!DOCTYPE html>
<html>
<body>
<img src="anything.jpg" width="104" height="142">
</body>
</html>
Result:
The alt Attribute
The alt attribute specifies an alternative text to be used, when an image cannot be displayed.The value of the attribute can be read by screen readers. This way, someone "listening" to the webpage, e.g. a blind person, can "hear" the element.
Example
<!DOCTYPE html>
<html>
<body>
<img src="anything.jpg" alt="anything
" width="104" height="142">
</body>
</html>
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:
p title='John "ShotGun" Nelson'>
Or vice versa:
<p title="John 'ShotGun' Nelson">
HTML Attributes
Below is an alphabetical list of some attributes often used in HTML:
Attribute
Description
alt
Specifies an alternative text for an image, when the image cannot be
displayed
disabled
Specifies that an input element should be disabled
href
Specifies the URL (web address) for a link
id
Specifies a unique id for an element
src
Specifies the URL (web address) for an image
style
Specifies an inline CSS style for an element
title
Specifies extra information about an element (displayed as a tool tip)
HTML Headings:
Format code of Headings:
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Output:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
HTML Paragraphs :
Code of Paragraphs:
<html>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
<p>
The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change.
</p>
</body>
</html>
Output:
This paragraph contains a lot of lines in the source code, but the browser ignores it.
This paragraph contains a lot of spaces in the source code, but the browser ignores it.
The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change.
This paragraph contains a lot of spaces in the source code, but the browser ignores it.
The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change.
HTML Styles:
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;">
The property is a CSS property. The value is a CSS value.
HTML Background Color
The background-color property defines the background color for an HTML element.
This example sets the background color for a page to powderblue:
Example
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
HTML Text Formatting :
HTML Formatting Elements
In the previous chapter, you learned about the HTML style attribute.
HTML also defines special elements for defining text with a special meaning.
HTML uses elements like <b> and <i> for formatting output, like bold or italic text.
Formatting elements were designed to display special types of text:
- <b> - Bold text
- <strong> - Important text
- <i> - Italic text
- <em> - Emphasized text
- <mark> - Marked text
- <small> - Small text
- <del> - Deleted text
- <ins> - Inserted text
- <sub> - Subscript text
- <sup> - Superscript text
HTML <b> and <strong> Elements
The HTML <b> element defines bold text, without any extra importance.
Example
<b>This text is bold</b>
Code:
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
</body>
</html>
Output:
This text is normal.
This text is bold.
<b>This text is bold</b>
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
</body>
</html>
This text is normal.
This text is bold.
The HTML <strong> element defines strong text, with added semantic "strong" importance.
Example
<strong>This text is strong</strong>
<!DOCTYPE html><html><body>
<p>This text is normal.</p>
<p><strong>This text is strong.</strong></p>
</body></html>
Output:
This text is normal.
This text is strong.
This text is strong.
HTML Quotation and Citation Elements :
HTML <q> for Short Quotations
The HTML <q> element defines a short quotation.
Browsers usually insert quotation marks around the <q> element.
Example
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
Code:
<!DOCTYPE html>
<html>
<body>
<p>Browsers usually insert quotation marks around the q element.</p>
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
</body>
</html>
Output:
Browsers usually insert quotation marks around the q element.
WWF's goal is to:
WWF's goal is to:
Build a future where people live in harmony with nature.
HTML Comment Tags
You can add comments to your HTML source by using the following syntax:
<!-- Write your comments here -->
Notice that there is an exclamation point (!) in the opening tag, but not in the closing tag.
Note: Comments are not displayed by the browser, but they can help document your HTML source code.
With comments you can place notifications and reminders in your HTML:
Example
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
HTML Colors:
Color Names
In HTML, a color can be specified by using a color name:
Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray
Color Names Sorted by Color Groups
All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):
Styling HTML with CSS
CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
CSS can be added to HTML elements in 3 ways:
- Inline - by using the style attribute in HTML elements
- Internal - by using a <style> element in the <head> section
- External - by using an external CSS file
The most common way to add CSS, is to keep the styles in separate CSS files. However, here we will use inline and internal styling, because this is easier to demonstrate, and easier for you to try it yourself.
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
This example sets the text color of the <h1> element to blue:
Example
<h1 style="color:blue;">This is a Blue Heading</h1>
Code:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a Blue Heading</h1>
</body>
</html>
Output:
This is a Blue Heading
HTML Links:
HTML Links - Syntax
In HTML, links are defined with the <a> tag:
<a href="url">link text</a>
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p>
<a href="https://www.facebook.com/html/">Click here</a>
</p>
</body>
</html>
Output:
No comments:
Post a Comment