, , and
[go: up one dir, main page]
tags. Common tags include

for main headings,

for paragraphs, and to embed images. Styles and formatting can be added using tags like for bold text or the style attribute. Comments can also be added for documentation.">, , and tags. Common tags include

for main headings,

for paragraphs, and to embed images. Styles and formatting can be added using tags like for bold text or the style attribute. Comments can also be added for documentation.">

Scribd
Upload
121 views20 pages

Chapter 2 Introduction To HTML

HTML (Hypertext Markup Language) is the standard markup language used to create web pages. It uses tags to define headings, paragraphs, lists, and other elements. The latest version is HTML5. HTML documents have a basic structure including <html>, <head>, and <body> tags. Common tags include <h1> for main headings, <p> for paragraphs, and <img> to embed images. Styles and formatting can be added using tags like <b> for bold text or the style attribute. Comments can also be added for documentation.

Uploaded by

zeki.mama21.21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
121 views20 pages

Chapter 2 Introduction To HTML

HTML (Hypertext Markup Language) is the standard markup language used to create web pages. It uses tags to define headings, paragraphs, lists, and other elements. The latest version is HTML5. HTML documents have a basic structure including <html>, <head>, and <body> tags. Common tags include <h1> for main headings, <p> for paragraphs, and <img> to embed images. Styles and formatting can be added using tags like <b> for bold text or the style attribute. Comments can also be added for documentation.

Uploaded by

zeki.mama21.21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 20

CHAPTER 2: INTRODUCTION TO HTML

2.1. What is HTML


HTML (Hyper Text Markup Language) is a language in which most websites are written. HTML is used to
create pages and make them functional. HTML was first created by Tim Berners-Lee, Robert Cailliau, and
others starting in 1989. Hypertext means that the document contains links that allow the reader to jump
to other places in the document or to another document altogether. The latest version is known as
HTML5.

A Markup Language is a way that computers speak to each other to control how text is processed and
presented. To do this HTML uses two things: tags and attributes. Originally, HTML was developed with the
intent of defining the structure of documents like headings, paragraphs, lists, and so forth to facilitate the
sharing of scientific information between researchers. Now, HTML is being widely used to format web
pages with the help of different tags available in HTML language.

Since the early days of the World Wide Web, there have been many versions of HTML:

Year Version
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
2016 W3C Candidate Recommendation: HTML 5.1
2017 W3C Recommendation: HTML5.1 2nd Edition
2017 W3C Recommendation: HTML5.2
2.2. Tags and Attributes
HTML documents imply a structure of nested HTML elements. These are indicated in the document by
HTML tags, enclosed in angle brackets. Tags and attributes are the basis of HTML. An element is indicated
by a pair of tags: a "start tag" < > and "end tag" </ >. The text content of the element is placed between
these tags. Tags may also enclose further tag markup between the start and end, including a mixture of
tags and text. This indicates further (nested) elements, as children of the parent element.

The start tag may also include the element's attributes within the tag. These indicate other information,
such as identifiers for sections within the document, identifiers used to bind style information to the
presentation of the document. Some elements, such as the line break <br> do not permit any embedded
content, either text or further tags. These require only a single empty tag and do not use an end tag.

The general form of an HTML element is:

<tag attribute1="value1" attribute2="value2">''content''</tag>

The name of an HTML element is the name used in the tags. Note that the end tag's name is preceded by
a slash character, /, and that in empty elements the end tag is neither required nor allowed. If attributes
are not mentioned, default values are used in each case. Attributes usually come in name/value pairs like:
name="value".

2.3. HTML Editors


Web pages can be created and modified by using professional HTML editors. However, for learning HTML
you can use a simple text editor like Notepad (for Windows), TextEdit (for Mac), or One of the following.

Sublime Text 3

 Offers cross-platform support for Windows, Mac, and Linux users. It has a mini-preview window
on the right. It is easily customizable. It is Beginner-friendly. It has Pleasant color schemes to
choose from. It can’t print documents or code. It has No toolbar or dashboard available.

Notepad ++

 Another common choice for HTML and other language coders is Notepad ++. It is a tiny program to
download and perform the functions you need for writing clean code. It has Distraction-free
interface. It has Auto-completion feature. It has Plugin options for extended functionalities. It Can
be difficult to get used to for beginners. It has No support for Mac.

Komodo Edit
 Komodo Edit is one of two editors released by the same label. They offer a simple, open-source
editor with a variety of extensions and language support. It is Easy-to-grasp coding interface. It is
Available for Mac, Windows, and Linux. It has Impressive language support. It has No auto
completion by default. Visual settings are difficult to find and change.

Follow the steps below to create your first web page:

 Step 1: Open your choice of HTML editor


 Step 2: Write Some HTML
 Step 3: Save the HTML Page using .htm or .html extension.
 Step 4: View the HTML Page in Your Browser

All HTML documents must start with a document type declaration: <!DOCTYPE html>. The <!DOCTYPE>
declaration represents the document type, and helps browsers to display web pages correctly. It must
only appear once, at the top of the page (before any HTML tags). The <!DOCTYPE> declaration is not case
sensitive.

The HTML document itself begins with <html> and ends with </html>. The visible part of the HTML
document is between <body> and </body>.
2.4. Basic HTML tags and Attributes
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. Headings Are Important that Search engines use the headings to index the structure and content
of your web pages. Users often skim a page by its headings. It is important to use headings to show the
document structure.

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>
Example:
<! DOCTYPE html>
<html>
<body>
<h1 style="font-size: 34px ;"> Heading 1</h1>
<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>

HTML Paragraphs
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. You cannot be sure how
HTML will be displayed. Large or small screens, and resized windows will create different results. With
HTML, you cannot change the display by adding extra spaces or extra lines in your HTML code. The
browser will automatically remove any extra spaces and lines when the page is displayed.
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. The HTML <br>
element defines a line break. Use <br> if you want a line break (a new line) without starting a new
paragraph
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph text. </p>
<hr>
<p>This is from other paragraph.</p>
<hr>
<p>This is<br>a paragraph<br>with line breaks.</p>
The HTML <pre> element defines preformatted
</body> text. The text inside a <pre> element is displayed in a
</html>
fixed-width font (usually Courier), and it preserves both spaces and line breaks.
<!DOCTYPE html>
<html>
<body>
<pre>
After writing this in here, I can go to new line just
without using a paragraph or br tag. Because I am inside
a pre tag. The pre tag preserves both spaces and line breaks.
What you write in HTML editor, will appear exactly in your browser.
</pre>
</body>
</html>

HTML Styles

The HTML style attribute is used to add styles to an element, such as color, font, size, and more. 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.

<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<h1 style="background-color:powderblue; font-family:verdana;">This is a heading</h1>
<p style="background-color:tomato; text-align:center">This is a paragraph.</p>
</body>
</html>

HTML Text Formatting Elements


Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines a part of text in an alternate voice or mood
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text

<!DOCTYPE html>
<html>
<body>
<p><b>This text is bold</b><strong>This text is important!</strong>
<i>This text is italic</i>This is<sub> subscript</sub> and <sup>superscript</sup><em>This text is emphasized.</em>
<small>This is some smaller text.</small>
Do not forget to buy <mark>milk</mark> today. My favorite color is <del>blue</del> red. My favorite color is <del>blue</del>
HTML Comment Tag
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 start tag, but not in the end tag. Note: Comments are
not displayed by the browser, but they can help document your HTML source code.

HTML Images

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
<img src="url" alt="alternatetext" style="width:500px;height:600px;">

HTML Favicon

A favicon is a small image displayed next to the page title in the browser tab. You can use any image you
like as your favicon. You can also create your own favicon on sites like https://www.favicon.cc. A favicon
image is displayed to the left of the page title in the browser tab. Next, add a <link> element to your
"index.html" file, after the <title> element, like this:

<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>This is a Heading</h1>
</body>
</html>

HTML Tables
HTML tables allow web developers to arrange data into rows and columns. A table in HTML consists of
table cells inside rows and columns. Each table cell is defined by a <td> and a </td> tag. td stands for table
data. Everything between <td> and </td> are the content of the table cell. A table cell can contain all sorts
of HTML elements: text, images, lists, links, other tables, etc. Each table row starts with a <tr> and ends
with a </tr> tag. tr stands for table row. You can have as many rows as you like in a table; just make sure
that the number of cells are the same in each row. Sometimes you want your cells to be table header
cells. In those cases use the <th> tag instead of the <td> tag: th stands for table header. <caption>
Defines a table caption. <colgroup> Specifies a group of one or more columns in a table for formatting.
<col> Specifies column properties for each column within a <colgroup> element. <thead> Groups the
header content in a table. <tbody> Groups the body content in a table. <tfoot> Groups the footer
content in a table.

 HTML tables can have borders of different styles and shapes. To add a border, use the CSS border
property on table, th, and td elements:
Example:
table, th, td {
border: 1px solid black;
}

 To set the width of a table, add the style attribute to the <table> element:

<table style="width:100%">

 Using a percentage as the size unit for a width means how wide will this element be compared to
its parent element, which in this case is the <body> element.
 To set the size of a specific column, add the style attribute on a <th> or <td> element:

<th style="width:70%">

 To set the height of a specific row, add the style attribute on a table row element:

<tr style="height:200px">

 HTML tables can adjust the padding inside the cells, and also the space between the cells. Cell
padding is the space between the cell edges and the cell content. By default the padding is set to
0.
To add padding on table cells, use the CSS padding property:
th, td {
padding: 15px; }
 To add padding only above the content, use the padding-top property. And the others sides with
the padding-bottom, padding-left, and padding-right properties:
th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}
 Cell spacing is the space between each cell. By default the space is set to 2 pixels. To change the
space between table cells, use the CSS border-spacing property on the table element:
table {
border-spacing: 30px;
}
 HTML tables can have cells that span over multiple rows and/or columns. To make a cell span over
multiple columns, use the colspan attribute. The value of the colspan attribute represents the
number of columns to span. To make a cell span over multiple rows, use the rowspan attribute.
The value of the rowspan attribute represents the number of rows to span.
Example:
<th colspan=2>Address</th>
<td>Kebele</td><td>House no.</td>

<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
 Use CSS to make your tables look better. If you add a background color on every other table row,
you will get a nice zebra stripes effect. To style every other table row element, use the :nth-
child(even) selector like this:
tr:nth-child(even) {
background-color: #D6EEEE;
}
 Use the :hover selector on tr to highlight table rows on mouse over:
tr:hover {background-color: #D6EEEE;}

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
//border-collapse: collapse;
border-radius: 10px;
border-style:dotted;
border-color:blue;
//border-spacing:5px;
}
td{
padding:10px;
}
th{
background-color: #96D4D4;
padding:10px;
}
tr:nth-child(odd) {
// background-color: #96D4D4;
}
tr:hover {background-color: #D6EEEE;}
</style>
</head>
<body>
<h1>Demonstrating table in HTML</h1>
<table border=1 style="width:50%;">
<caption>Statistical Data of MSE in Hossana.</caption>
<tr>
<th rowspan=2>No.</th>
<th rowspan=2>Type of SME</th>
<th rowspan=2>Male</th>
<th rowspan=2>Female</th>
<th rowspan=2>Total</th>
<th colspan=2>Address</th>
</tr>
<tr>
<th>Kebele</th>
<th>House no.</th>
</tr>
<tr>
<td>1</td><td>Metal work</td><td>10</td><td>10</td><td>20</td><td>01</td><td>256</td>
</tr>
<tr>
<td>2</td><td>Wood Work</td><td>20</td><td>20</td><td>40</td><td>02</td><td>560</td>
</tr>
<tr>
<td>3</td><td>Textile</td><td>30</td><td>40</td><td>70</td><td>03</td><td>806</td>
</tr>
<tr>
<td>4</td><td>Agroprocessing</td><td>30</td><td>40</td><td>70</td><td>04</td><td>796</td>
</tr>
</table>
</body>
</html>

HTML lists

 HTML lists allow web developers to group a set of related items in lists. 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.
Example:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
 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.

Example:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
 The CSS list-style-type property is used to define the style of the list item marker. It can have one
of the following values:
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked
Example:
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
 Lists can be nested (list inside list). A list item (<li>) can contain a new list, and other HTML
elements, like images and links, etc.
<ul>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
</ul>
 HTML lists can be styled in many different ways with CSS. One popular way is to style a list
horizontally, to create a navigation menu:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
overflow: hidden;
background-color: green;
}
li {
float: left;
}
li a {
display: block;
color: white;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<h2>Navigation Menu</h2>
<ul>
<li><a href="#home"> Home</a></li>
<li><a href="#news"> News</a></li>
<li><a href="#contact"> Contact</a></li>
<li><a href="#about"> About</a></li>
</ul>
</body>
</html>
HTML Block and Inline Elements

Every HTML element has a default display value, depending on what type of element it is. There are two
display values: block and inline. A block-level element always starts on a new line, and the browsers
automatically add some space (a margin) before and after the element. A block-level element always
takes up the full width available (stretches out to the left and right as far as it can).
 Two commonly used block elements are: <p> and <div>. The <p> element defines a paragraph in
an HTML document. The <div> element defines a division or a section in an HTML document.

Example:
<!DOCTYPE html>
<html>
<body>
<p style="border: 1px solid black">Hello World</p>
<div style="border: 1px solid black">Hello World</div>
<p>The P and the DIV elements are both block elements, and they will always start on a new line and take up
the full width available (stretches out to the left and right as far as it can).</p>
</body>
</html>

The following are the block-level elements in HTML:


<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption>
<figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre>
<section> <table> <tfoot> <ul> <video>
 An inline element does not start on a new line. An inline element only takes up as much width as
necessary. An inline element cannot contain a block-level element!
Example:
<!DOCTYPE html>
<html>
<body>
<p>This is an inline span <span style="border: 1px solid black">Hello World</span> element inside a
paragraph.</p>
<p>The SPAN element is an inline element, and will not start on a new line and only takes up as much width
as necessary.</p>
</body>
</html>
The following are the block-level elements in HTML:
<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img>
<input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span>
<strong> <sub> <sup> <textarea> <time> <tt> <var>
 The <div> element is often used as a container for other HTML elements. The <div> element has
no required attributes, but style, class and id are common. When used together with CSS, the
<div> element can be used to style blocks of content.
 The <span> Element The <span> element is an inline container used to mark up a part of a text, or
a part of a document. The <span> element has no required attributes, but style, class and id are
common. When used together with CSS, the <span> element can be used to style parts of the text.
HTML class Attribute
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. The class attribute can be used on any HTML element. Note that the class name is case sensitive!

<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>

To create a class; write a period (.) character, followed by a class name. Then, define the CSS properties
within curly braces {}.
HTML id Attribute
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 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 {}.

The id name is case sensitive! The id name must contain at least one character, cannot start with a
number, and must not contain whitespaces (spaces, tabs, etc.). 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.
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:

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My Header</h1>
</body>
</html>

HTML Iframes

An HTML iframe is used to display a web page within a web page. The HTML <iframe> tag specifies an
inline frame. An inline frame is used to embed another document within the current HTML document.

<iframe src="url" title="description"></iframe>

It is a good practice to always include a title attribute for the <iframe>. This is used by screen readers to
read out what the content of the iframe is. Use the height and width attributes to specify the size of the
iframe. The height and width are specified in pixels by default. By default, an iframe has a border around
it. To remove the border, add the style attribute and use the CSS border property. With CSS, you can also
change the size, style and color of the iframe's border.

Example:
<iframe src="Test.html" style="border:none;" height="300" width="100%" title="Iframe "> </iframe>

The HTML <meta> Element


The <meta> element is typically used to specify the character set, page description, keywords, author of
the document, and viewport settings. The metadata will not be displayed on the page, but is used by
browsers (how to display content or reload page), by search engines (keywords), and other web services.

Examples
 Define the character set used. This lets our browser display character from any language.

<meta charset="UTF-8">

 Define keywords for search engines.

<meta name="keywords" content="HTML, CSS, JavaScript">

 Define a description of your web page:

<meta name="description" content="My country Ethiopia">

 Define the author of a page:

<meta name="author" content="Wondimagegn Leta">

 Refresh document every 30 seconds:

<meta http-equiv="refresh" content="30">

 Setting the viewport to make your website look good on all devices:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

HTML Forms

An HTML form is used to collect user input. The user input is most often sent to a server for processing.
The HTML <form> element is used to create an HTML form for user input. The form-data can be sent as
URL variables (method="get") or as an HTTP post transaction (method="post"). The form action attribute
specifies the URL of the file that will process the input when the form is submitted.

The "get" method:


This method appends the form-data to the URL in name/value pairs. This method is useful for
form submissions where a user want to bookmark the result. There is a limit to how much data
you can place in a URL (varies between browsers), therefore, you cannot be sure that all of the
form-data will be correctly transferred. Never use the "get" method to pass sensitive information!
(password or other sensitive information will be visible in the browser's address bar)

The "post" method:


This method sends the form-data as an HTTP post transaction. Form submissions with the "post"
method cannot be bookmarked. The "post" method is more robust and secure than "get", and
"post" does not have size limitations or different types of input elements, such as: text fields,
checkboxes, radio buttons, submit buttons, etc.

 The <label> Element


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
focuses on the input element.

The <label> element also helps 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.

<label for="fname">First name:</label><br>//id must much with for attribute


 The HTML <input> element
o The HTML <input> element is the most used form element. An <input> element can be
displayed in many ways, depending on the type attribute.
o Input Type Text
<input type="text"> defines a single-line text input field.
Example:
<input type="text" id="fname" name="fname"><br>
o Input Type Password
<input type="password"> defines a password field.

<input type="password" id="pwd" name="pwd">

o Input Type Submit


<input type="submit"> defines a button for submitting form data to a form-handler. The
form-handler is typically a server page with a script for processing input data. The form-
handler is specified in the form's action attribute.
<form action="register.php">
<input type="text" id="fname" name="fname" value="John"><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit">
</form>
o Input Type Reset
<input type="reset"> defines a reset button that will reset all form values to their default
values.

o Input Type Radio


<input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of
a limited number of choices

<input type="radio" id="male" name="gender" value="Male">


<input type="radio" id="female" name="gender" value="Female">

o Input Type Checkbox


<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE
options of a limited number of choices.

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">


<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">

o Input Type Button


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

<input type="button" onclick="alert('Hello!')" value="Click Me!">

o Input Type Color


The <input type="color"> is used for input fields that should contain a color. Depending on
browser support, a color picker can show up in the input field.

<input type="color" id="favcolor" name="favcolor">

o Input Type Date

The <input type="date"> is used for input fields that should contain a date. Depending on
browser support, a date picker can show up in the input field. You can also use the min and
max attributes to add restrictions to dates. The <input type="month"> allows the user to
select a month and year. The <input type="week"> allows the user to select a week and
year.

<input type="date" id="datemax" name="datemax" max="1979-12-31">


<input type="date" id="datemin" name="datemin" min="2000-01-02">
<input type="month" id="bdaymonth" name="bdaymonth">
<input type="week" id="week" name="week">

o Input Type Email


The <input type="email"> is used for input fields that should contain an e-mail address.
Depending on browser support, the e-mail address can be automatically validated when
submitted. Some smartphones recognize the email type, and add ".com" to the keyboard
to match email input.

<input type="email" id="email" name="email">

o Input Type File

The <input type="file"> defines a file-select field and a "Browse" button for file uploads.

<input type="file" id="myfile" name="myfile">

o Input Type Hidden

The <input type="hidden"> defines a hidden input field (not visible to a user). A hidden
field lets web developers include data that cannot be seen or modified by users when a
form is submitted. A hidden field often stores what database record that needs to be
updated when the form is submitted. While the value is not displayed to the user in the
page's content, it is visible (and can be edited) using any browser's developer tools or
"View Source" functionality. Do not use hidden inputs as a form of security!

<input type="hidden" id="custId" name="custId" value="3487">

o Input Type Number


The <input type="number"> defines a numeric input field. You can also set restrictions
on what numbers are accepted.
<input type="number" id="quantity" name="quantity" min="1" max="5">

o Input Type Tel


The <input type="tel"> is used for input fields that should contain a telephone number.

<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-


[0-9]{3}">

o Input Type Url


The <input type="url"> is used for input fields that should contain a URL address.
Depending on browser support, the url field can be automatically validated when
submitted.

<input type="url" id="homepage" name="homepage">


o Input Restrictions
Here is a list of some common input restrictions:

Attribute Description
checked Specifies that an input field should be pre-selected when the page
loads (for type="checkbox" or type="radio")
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field

HTML Links

HTML links are hyperlinks. You can click on a link and jump to another document. When you move the
mouse over a link, the mouse arrow will turn into a little hand. Note: A link does not have to be text. A
link can be an image or any other HTML element! The HTML <a> tag defines a hyperlink. It has the
following syntax:

<a href="url">link text</a>

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.

Example
This example shows how to create a link to W3Schools.com:
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>

By default, An unvisited link is underlined and blue. A visited link is underlined and purple. An active link is
underlined and red. But remember that Links can of course be styled with CSS, to get another look!

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

<!DOCTYPE html>
<html>
<body>
<p><a href="https://www.w3schools.com/">Visit W3Schools.com!</a></p>
</body>
</html>

You might also like