Scribd
Upload
2K views

Html5: !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML

HTML is the standard markup language for creating web pages. Key HTML elements include headings, paragraphs, links, images and tables. HTML pages use tags like <h1> for headings, <p> for paragraphs, <a> for links, <img> for images and <table> to define tables with <tr> for rows and <td> for cells. CSS can control the look of HTML elements using styles, colors and positioning.

Uploaded by

mahesh sambari
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2K views

Html5: !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML

HTML is the standard markup language for creating web pages. Key HTML elements include headings, paragraphs, links, images and tables. HTML pages use tags like <h1> for headings, <p> for paragraphs, <a> for links, <img> for images and <table> to define tables with <tr> for rows and <td> for cells. CSS can control the look of HTML elements using styles, colors and positioning.

Uploaded by

mahesh sambari
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

HTML5

HTML stands for Hyper Text Markup Language

HTML is the standard markup language for creating Web pages

HTML describes the structure of a Web page

HTML consists of a series of elements

HTML elements tell the browser how to display the content

HTML elements label pieces of content such as "this is a heading", "this is


a paragraph", "this is a link", etc.

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

The <!DOCTYPE html> declaration defines that this document is an


HTML5 document

All HTML documents must start with a document type declaration:


<!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.
The <html> element is the root element of an HTML page

The <head> element contains meta information about the HTML page

The <title> element specifies a title for the HTML page (which is shown in
the browser's title bar or in the page's tab)

The <body> element defines the document's body, and is a container for all
the visible contents, such as headings, paragraphs, images, hyperlinks,
tables, lists, etc.

The <h1> element defines a large heading

The <p> element defines a paragraph

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important
heading

HTML paragraphs are defined with the <p> tag

HTML links are defined with the <a> tag

<a href="https://www.w3schools.com">This is a link</a>

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="142">

The <br> tag defines a line break, and is an empty element without a
closing tag

The style attribute is used to add styles to an element, such as color, font,
size, and more
You should always include the lang attribute inside the <html> tag, to
declare the language of the Web page. This is meant to assist search engines
and browsers.

<!DOCTYPE html>

<html lang="en">

<body>

...

</body>

</html>

Country codes can also be added to the language code in the lang attribute.
So, the first two characters define the language of the HTML page, and the
last two characters define the country.

<!DOCTYPE html>

<html lang="en-US">

<body>

...

</body>

</html>

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

<p title="I'm a tooltip">This is a paragraph.</p>

The HTML standard does not require quotes around attribute values.

However, W3C recommends quotes in HTML, and demands quotes for


stricter document types like XHTML
HTML ATTRIBUTES

All HTML elements can have attributes

The href attribute of <a> specifies the URL of the page the link goes to

The src attribute of <img> specifies the path to the image to be displayed

The width and height attributes of <img> provide size information for
images

The alt attribute of <img> provides an alternate text for an image

The style attribute is used to add styles to an element, such as color, font,
size, and more

The lang attribute of the <html> tag declares the language of the Web page

The title attribute defines some extra information about an element

Each HTML heading has a default size. However, you can specify the size
for any heading with the style attribute, using the CSS font-size property

<h1 style="font-size:60px;">Heading 1</h1>

The <hr> tag defines a thematic break in an HTML page, and is most often
displayed as a horizontal rule(Line).

The <hr> element is used to separate content (or define a change) in an


HTML page

The HTML <br> element defines a line break.

Use <br> if you want a line break (a new line) without starting a new
paragraph

The HTML <pre> element defines preformatted text.

The text inside a <pre> element is displayed in a fixed-width font (usually


Courier), and it preserves both spaces and line breaks

The HTML style attribute is used to add styles to an element, such as color,
font, size, and more.
<tagname style="property:value;">

The CSS background-color property defines the background color for an


HTML element.

<body style="background-color:powderblue;">

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

The CSS color property defines the text color for an HTML element

<h1 style="color:blue;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

For creating border in html

<h1 style="border:2px solid Tomato;">Hello World</h1>

<h1 style="border:2px solid DodgerBlue;">Hello World</h1>

<h1 style="border:2px solid Violet;">Hello World</h1>

The CSS font-family property defines the font to be used for an HTML
element

<h1 style="font-family:verdana;">This is a heading</h1>

<p style="font-family:courier;">This is a paragraph.</p>

The CSS font-size property defines the text size for an HTML element

<h1 style="font-size:300%;">This is a heading</h1>

<p style="font-size:160%;">This is a paragraph.</p>


The CSS text-align property defines the horizontal text alignment for an
HTML element:

<h1 style="text-align:center;">Centered Heading</h1>

<p style="text-align:center;">Centered paragraph.</p>

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> - Smaller text
● <del> - Deleted text
● <ins> - Inserted text
● <sub> - Subscript text
● <sup> - Superscript text

You can add comments to your HTML source by using the following syntax

<!-- Write your comments here →

Colors Defining

<h1 style="background-color:rgb(255, 99, 71);">...</h1>

<h1 style="background-color:#ff6347;">...</h1>

<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>

<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

CSS can be added to HTML documents in 3 ways:

Inline - by using the style attribute inside HTML element

<h1 style="color:blue;">A Blue Heading</h1>


Internal - by using a <style> element in the <head> section

<!DOCTYPE html>

<html>

<head>

<style>

body {background-color: powderblue;}

h1 {color: blue;}

p {color: red;}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

External - by using a <link> element to link to an external CSS file

The most important attribute of the <a> element is the href attribute,
which indicates the link's destination.

The link text is the part that will be visible to the reader.

Clicking on the link text, will send the reader to the specified URL address

By default, the linked page will be displayed in the current browser


window. To change this, you must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:


● _self - Default. Opens the document in the same window/tab as it was
clicked
● _blank - Opens the document in a new window or tab
● _parent - Opens the document in the parent frame
● _top - Opens the document in the full body of the window

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

To use an image as a link, just put the <img> tag inside the <a> tag

<a href="default.asp">

<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">

</a>

Use mailto: inside the href attribute to create a link that opens the user's
email program (to let them send a new email)

<a href="mailto:[email protected]">Send email</a>

● Use the <a> element to define a link


● Use the href attribute to define the link address
● Use the target attribute to define where to open the linked document
● Use the <img> element (inside <a>) to use an image as a link
● Use the mailto: scheme inside the href attribute to create a link that
opens the user's email program

The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to
web pages. The <img> tag creates a holding space for the referenced image.

The <img> tag is empty, it contains attributes only, and does not have a
closing tag.

The <img> tag has two required attributes:

● src - Specifies the path to the image


● alt - Specifies an alternate text for the image

You can use the style attribute to specify the width and height of an image.

<img src="img_girl.jpg" alt="Girl in a jacket"


style="width:500px;height:600px;">

Or

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

Image Floating

Use the CSS float property to let the image float to the right or to the left of
a text:

<p><img src="smiley.gif" alt="Smiley face"


style="float:right;width:42px;height:42px;">

The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face"


style="float:left;width:42px;height:42px;">

The image will float to the left of the text.</p>

● Use the HTML <img> element to define an image


● Use the HTML src attribute to define the URL of the image
● Use the HTML alt attribute to define an alternate text for an image,
if it cannot be displayed
● Use the HTML width and height attributes or the CSS width and
height properties to define the size of the image
● Use the CSS float property to let the image float to the left or to the
right

The <table> tag defines an HTML table.


Each table row is defined with a <tr> tag. Each table header is defined with
a <th> tag. Each table data/cell is defined with a <td> tag.

By default, the text in <th> elements are bold and centered.

By default, the text in <td> elements are regular and left-aligned

<table style="width:100%">

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

</tr>

<tr>

<td>Jill</td>

<td>Smith</td>

<td>50</td>

</tr>

<tr>

<td>Eve</td>

<td>Jackson</td>

<td>94</td>

</tr>

</table>

● Use the HTML <table> element to define a table


● Use the HTML <tr> element to define a table row
● Use the HTML <td> element to define a table data
● Use the HTML <th> element to define a table heading
● Use the HTML <caption> element to define a table caption
● Use the CSS border property to define a border
● Use the CSS border-collapse property to collapse cell borders
● Use the CSS padding property to add padding to cells
● Use the CSS text-align property to align cell text
● Use the CSS border-spacing property to set the spacing between cells
● Use the colspan attribute to make a cell span many columns
● Use the rowspan attribute to make a cell span many rows
● Use the id attribute to uniquely define one table

HTML lists allow web developers to group a set of related items in lists

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the
<li> tag.

The list items will be marked with bullets (small black circles) by default

● Use the HTML <ul> element to define an unordered list


● Use the CSS list-style-type property to define the list item marker
● Use the HTML <li> element to define a list item
● Lists can be nested
● List items can contain other HTML elements
● Use the CSS property float:left to display a list horizontally

<ul>

<li>Coffee</li>

<li>Tea

<ul>

<li>Black tea</li>

<li>Green tea</li>
</ul>

</li>

<li>Milk</li>

</ul>

Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li>
tag.

The list items will be marked with numbers by default

type="1” The list items will be numbered with numbers(default)

type="A" The list items will be numbered with uppercase letters

type="a" The list items will be numbered with lowercase letters

type="I" The list items will be numbered with uppercase roman


numbers

type="i" The list items will be numbered with lowercase roman


numbers

<ol start="50">

<li>Coffee</li>

<li>Tea</li>
<li>Milk</li>

</ol>

● Use the HTML <ol> element to define an ordered list


● Use the HTML type attribute to define the numbering type
● Use the HTML <li> element to define a list item
● Lists can be nested
● List items can contain other HTML elements

The HTML class attribute is used to specify a class for an HTML element.

Multiple HTML elements can share the same class

The class attribute is often used to point to a class name in a style sheet. It
can also be used by a JavaScript to access and manipulate elements with
the specific class name.

In the following example we have three <div> elements with a class


attribute with the value of "city". All of the three <div> elements will be
styled equally according to the .city style definition in the head section

Tip: The class attribute can be used on any HTML element.

Note: The class name is case sensitive!

<h2 class="city main">London</h2>

● The HTML class attribute specifies one or more class names for an
element
● Classes are used by CSS and JavaScript to select and access specific
elements
● The class attribute can be used on any HTML element
● The class name is case sensitive
● Different HTML elements can point to the same class name
● JavaScript can access elements with a specific class name with the
getElementsByClassName() method

The HTML id attribute is used to specify a unique id for an HTML


element.
You cannot have more than one element with the same id in an HTML
document.

The id attribute specifies a unique id for an HTML element. The value of


the id attribute must be unique within the HTML document.

The id attribute is used to point to a specific style declaration in a style


sheet. It is also used by JavaScript to access and manipulate the element
with the specific id.

The syntax for id is: write a hash character (#), followed by an id name.
Then, define the CSS properties within curly braces {}.

In the following example we have an <h1> element that points to the id


name "myHeader". This <h1> element will be styled according to the
#myHeader style definition in the head section:

<h1 id="myHeader">My Cities</h1>

Difference Between Class and ID

A class name can be used by multiple HTML elements, while an id name


must only be used by one HTML element within the page

HTML Bookmarks with ID and Links

HTML bookmarks are used to allow readers to jump to specific parts of a


webpage.

Bookmarks can be useful if your page is very long.

To use a bookmark, you must first create it, and then add a link to it.

Then, when the link is clicked, the page will scroll to the location with the
bookmark

<h2 id="C4">Chapter 4</h2>

<a href="#C4">Jump to Chapter 4</a>


The HTML <form> element is used to create an HTML form for user
input:

The <form> element is a container for different types of input


elements, such as: text fields, checkboxes, radio buttons, submit
buttons, etc.

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on


the type attribute.

Type Description

<input type="text"> Displays a single-line text input field

<input Displays a radio button (for selecting one of


type="radio"> many choices)

<input Displays a checkbox (for selecting zero or


type="checkbox"> more of many choices)

<input Displays a submit button (for submitting


type="submit"> the form)

<input Displays a clickable button


type="button">

The <input type="text"> defines a single-line input field for text


input.
<form>

<label for="fname">First name:</label><br>

<input type="text" id="fname" name="fname"><br>

<label for="lname">Last name:</label><br>

<input type="text" id="lname" name="lname">

</form>

Notice the use of the <label> element in the example above.

The <label> tag defines a label for many form elements.

The <label> element is useful for screen-reader users, because the


screen-reader will read out loud the label when the user focus on the
input element.

The <label> element also help users who have difficulty clicking on
very small regions (such as radio buttons or checkboxes) - because
when the user clicks the text within the <label> element, it toggles
the radio button/checkbox.

The for attribute of the <label> tag should be equal to the id


attribute of the <input> element to bind them together.

The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

<form>

<input type="radio" id="html" name="fav_language" value="HTML">

<label for="html">HTML</label><br>

<input type="radio" id="css" name="fav_language" value="CSS">

<label for="css">CSS</label><br>

<input type="radio" id="javascript" name="fav_language"


value="JavaScript">

<label for="javascript">JavaScript</label>
</form>

The <input type="checkbox"> defines a checkbox.

You might also like