Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
30 views

HTML Week Days

HTML is a markup language used to define the structure and layout of web pages. It uses tags to annotate text with information about formatting, links, tables, and other document elements. Some key HTML tags are <b> for bold text, <i> for italics, <a> for links, <img> for images, and <table> for tables. HTML was created by Tim Berners-Lee in 1990 and allows web pages to connect to each other through hyperlinks.

Uploaded by

Sara Arif Khan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
30 views

HTML Week Days

HTML is a markup language used to define the structure and layout of web pages. It uses tags to annotate text with information about formatting, links, tables, and other document elements. Some key HTML tags are <b> for bold text, <i> for italics, <a> for links, <img> for images, and <table> for tables. HTML was created by Tim Berners-Lee in 1990 and allows web pages to connect to each other through hyperlinks.

Uploaded by

Sara Arif Khan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

What is HTML?

HTML is Hypertext Markup Language


Hypertext:- Hypertext is the text which capable of transferring world wide web computers. It also
enable to establish link with different web pages. The term Hypertext is coined/developed by Ted
Nelson in 1960.
Markup:- It refers to the identifying or marking the text by applying the formatting tag in the web
page. Markup provides different types of effect in the web page.
Language:- It signifies the rule and syntax for writing or making a web page.

It is a language designed for communatication with web pages throught standard tags defined for
this language.

Why HTML?
It is a form of programming language that is used to make web pages on the internet viewable. So it
can be said that it is because of HTML that web pages are interesting to look at.

History of HTML?
First developed by Tim Berners-Lee in 1990, HTML is short for Hypertext Markup Language.
HTML is used to create electronic documents (called pages) that are displayed on the World Wide
Web. Each page contains a series of connections to other pages called hyperlinks.

In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and prototyped ENQUIRE, a
system for CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo
proposing an Internet-based hypertext system. Berners-Lee specified HTML and wrote the browser
and server software in late 1990.

Features of HTML:
• It is a markup language
•  It is not case sensitive language
• It provide different attributes of tag to making attractive web page
• It is easy to learn and use
• It allows to format text, graphics, sound and video.
• It contains the different link of another page.
• It is a platform independent language.
Prerequisite for HTML File creation:
• Editor
• Browser
 Editors used for html file creation:
• Notepad
• Notepad++
• Sublimetext
• Brackets
• Eclipse
• Visual Studio
• etc
Browser
• Chrome
• Firefox
• Safari
• IE
• Opera
How do we create html file?
1. Open editor
2. save file with following format:
filename.html
or
filename.htm
Note: .html and .htm are file extensions
3. Write your code
4. Save changes
Now you can run your file on brwoser like IE, chrome, firefox, etc.
First Example of HTML

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

Text Here

</body>
</html>
Below is a visualization of an HTML page structure:

Head --> Title -- O X

Body

DOCTYPE ?
It defines the document type or it instruct the browser about the version of HTML.
HTML
It is root element of every tag in HTML except DOCTYPE.
Head
It should be the first element inside the <html> element, which contains the metadata(information
about the document). It must be closed before the body tag opens.
Title
It is used to add title of that HTML page which appears at the top of the browser window.(Optional)
Body
Text between body tag describes the body content of the page that is visible to the end user. This tag
contains the main content of the HTML document.
Heading
A HTML h tag can be defined as a title or a subtitle which you want to display on the webpage.

There are six different HTML headings which are defined with the <h1> to <h6> tags, from highest
level h1 (main heading) to the least level h6 (least important heading).

<!DOCTYPE html>
<html>
<head>
<title>Heading Tag</title>
</head>
<body>

<h1> Hello </h1>

<h2> Hello </h2>

<h3> Hello </h3>

<h4> Hello </h4>

<h5> Hello </h5>

<h6> Hello </h6>

</body>
</html>
Paragraph
HTML p tag is used to define a paragraph in a webpage. It is a notable point that a browser itself
add an empty line before and after a paragraph.

Note: If we are using various <p> tags in one HTML file then browser automatically adds a single
blank line between the two paragraphs.
-------------------------------------------day 2 start-------------------------------------------------------------
Element and Attributes

Formatting
HTML Formatting is a process of formatting text for better look and feel. These tags are used to
make text bold, italicized, or underlined. There are almost 14 options available that how text
appears in HTML and XHTML.
In HTML the formatting tags are divided into two categories:
• Physical tag: These tags are used to provide the visual appearance to the text.
• Logical tag: These tags are used to add some logical or semantic value to the text.

NOTE: There are some physical and logical tags which may give same visual appearance, but
they will be different in semantics.

Element name Description


<b> This is a physical tag, which is used to bold the text written between it.
<strong> This is a logical tag, which tells the browser that the text is important.
<i> This is a physical tag which is used to make text italic.
<em> This is a logical tag which is used to display content in italic.
<mark> This tag is used to highlight text.
<u> This tag is used to underline text written between it.
<tt> This tag is used to appear a text in teletype. (not supported in HTML5)
This tag is used to draw a strikethrough on a section of text. (Not supported in
<strike>
HTML5)
<sup> It displays the content slightly above the normal line.
<sub> It displays the content slightly below the normal line.
<del> This tag is used to display the deleted content.
<ins> This tag displays the content which is added
<big> This tag is used to increase the font size by one conventional unit.
<small> This tag is used to decrease the font size by one unit from base font size.

<html>

<head>
<title> Formatting tags </title>
</head>

<body>

This is a physical tag, which is used to bold the text written between it -->
<b>This is my text</b>

<br/>
<br/>

This is a logical tag, which tells the browser that the text is important. -->
<strong>This is my text</strong>

<br/>
<br/>

This is a physical tag which is used to make text italic. -->


<i>This is my text</i>

<br/>
<br/>

This is a logical tag which is used to display content in italic. -->


<em>This is my text</em>

<br/>
<br/>

This tag is used to highlight text. -->


<mark>This is my text</mark>
<br/>
<br/>

This tag is used to underline text written between it. -->


<u>This is my text</u>

<br/>
<br/>

This tag is used to appear a text in teletype. (not supported in HTML5) -->
<tt>This is my text</tt>

<br/>
<br/>

This tag is used to draw a strikethrough on a section of text. (Not supported in HTML5) -->
<strike>This is my text</strike>

<br/>
<br/>

It displays the content slightly above the normal line. -->


normal text<sup>This is my text</sup>

<br/>
<br/>

It displays the content slightly below the normal line. -->


normal text<sub>This is my text</sub>

<br/>
<br/>

This tag is used to display the deleted content. -->


This <del> is my </del> text

<br/>
<br/>

This tag displays the content which is added -->


This is my <ins> text</ins>

<br/>
<br/>

This tag is used to increase the font size by one conventional unit. -->
<big>This is my text</big>

<br/>
<br/>
This tag is used to decrease the font size by one conventional unit. -->
<small>This is my text</small>

</body>
</html>

-------------------------------------------day 3 start-------------------------------------------------------------

HTML Phrase tag


The HTML phrase tags are special purpose tags, which defines the structural meaning of a block of
text or semantics of text. Following is the list of phrase tags, some of which we have already
discussed in HTML formatting.
• Abbreviation tag : <abbr>
• Acronym tag: <acronym> (not supported in HTML5)
• Marked tag: <mark>
• Strong tag: <strong>
• Emphasized tag : <em>
• Definition tag: <dfn>
• Quoting tag: <blockquote>
• Short quote tag : <q>
• Code tag: <code>
• Keyboard tag: <kbd>
• Address tag: <address>
-------------------------------------------day 4 start-------------------------------------------------------------

HTML Anchor
The HTML anchor tag defines a hyperlink that links one page to another page. It can create
hyperlink to other web page as well as files, location, or any URL. The "href" attribute is the most
important attribute of the HTML a tag. and which links to destination page or URL.

href attribute of HTML anchor tag


The href attribute is used to define the address of the file to be linked. In other words, it points out
the destination page.
The syntax of HTML anchor tag is given below.

<a href = "..........."> Link Text </a>

HTML Image
HTML img tag is used to display image on the web page. HTML img tag is an empty tag that
contains attributes only, closing tags are not used in HTML image element.
Let's see an example of HTML image.

<h2>HTML Image Example</h2>  
<img src="good_morning.jpg" alt="Good Morning Friends"/>  

HTML Table
HTML table tag is used to display data in tabular form (row * column). There can be many
columns in a row.
We can create a table to display data in tabular form, using <table> element, with the help of <tr> ,
<td>, and <th> elements.
In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is
defined by <td> tags.
HTML tables are used to manage the layout of the page e.g. header section, navigation bar, body
content, footer section etc. But it is recommended to use div tag over table to manage the layout of
the page .

HTML Table Tags


Tag Description
<table> It defines a table.
<tr> It defines a row in a table.
<th> It defines a header cell in a table.
<td> It defines a cell in a table.
<caption> It defines the table caption.
<colgroup> It specifies a group of one or more columns in a table for formatting.
<col> It is used with <colgroup> element to specify column properties for each column.
<tbody> It is used to group the body content in a table.
<thead> It is used to group the header content in a table.
<tfooter> It is used to group the footer content in a table.

HTML Table Example


Let's see the example of HTML table tag. It output is shown above.

<!DOCTYPE html>
<html>
<head>
<title>Table Demo</title>
</head>
<body>
<table border = "1">
<thead>
<tr>
<th colspan = "2"> Login </th>
</tr>
</thead>
<tbody>
<tr>
<td> Enter Name </td>
<td> <input type = "text"> </td>
</tr>
<tr>
<td colspan = "2" align = "right">
<input type = "submit" value = "login">
</td>
</tr>
</tbody>
</table>
</body>
</html>
HTML Lists
HTML Lists are used to specify lists of information. All lists may contain one or more list elements.
There are three different types of HTML lists:
1. Ordered List or Numbered List (ol)
2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)

Note: We can create a list inside another list, which will be termed as nested List.

HTML Ordered List or Numbered List


In the ordered HTML lists, all the list items are marked with numbers by default. It is known as
numbered list also. The ordered list starts with <ol> tag and the list items start with <li> tag.

HTML Unordered List or Bulleted List


In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list
also. The Unordered list starts with <ul> tag and list items start with the <li> tag.

HTML Description List or Definition List


HTML Description list is also a list style which is supported by HTML and XHTML. It is also
known as definition list where entries are listed like a dictionary or encyclopedia.
The definition list is very appropriate when you want to present glossary, list of terms or other
name-value list.
The HTML definition list contains following three tags:

<dl>
<dt>title of the list</dt>
<dd>data of the list</dd>
</dl>

Example:

<!DOCTYPE html>
<html>
<head>
<title>List Demo</title>
</head>
<body>
<h3> Ordered List </h3>
<ol>
<li> Apple </li>
<li> Mango </li>
<li> Orange </li>
<li> Pineapple </li>
</ol>

<h3> Unordered List </h3>


<ol>
<li> Apple </li>
<li> Mango </li>
<li> Orange </li>
<li> Pineapple </li>
</ol>
<h3> Description List </h3>
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language. This is markup language</dd>
<dt>XML</dt>
<dd>Extensible Markup Language</dd>
</dl>
</body>
</html>
HTML Nested List
A list within another list is termed as nested list. If you want a bullet list inside a numbered list then
such type of list will called as nested list.

<!DOCTYPE html>
<html>
<head>
<title>List Demo</title>
</head>
<body>
<dl>
<dt>Fruit</dt>
<dd>
<ul>
<li> Apple </li>
<li> Mango </li>
<li> Orange </li>
<li> Pineapple </li>
</ul>
</dd>
<dt>Coffee</dt>
<dd>
<ul>
<li> Cold Coffee </li>
<li> Hot Coffee </li>
<li> cappuccino </li>
</ul>
</dd>
</dl>
</body>
</html>

--------------------------------------------day 5 start-----------------------------------------------------------

HTML Form
An HTML form is a section of a document which contains controls such as text fields, password
fields, checkboxes, radio buttons, submit button, menus etc.
An HTML form facilitates the user to enter data that is to be sent to the server for processing such
as name, email address, password, phone number, etc. .

Why use HTML Form


HTML forms are required if you want to collect some data from of the site visitor.
For example: If a user want to purchase some items on internet, he/she must fill the form such as
shipping address and credit/debit card details so that item can be sent to the given address.

HTML Form Syntax


<form action="server url" method="get|post">  
  //input controls e.g. textfield, textarea, radiobutton, button  
</form>  

HTML Form Tags


Let's see the list of HTML 5 form tags.

Tag Description
<form> It defines an HTML form to enter inputs by the used side.
<input> It defines an input control.
<textarea> It defines a multi-line input control.
<label> It defines a label for an input element.
<fieldset> It groups the related element in a form.
<legend> It defines a caption for a <fieldset> element.
<select> It defines a drop-down list.
<optgroup> It defines a group of related options in a drop-down list.
<option> It defines an option in a drop-down list.
<button> It defines a clickable button.

HTML 5 Form Tags


Let's see the list of HTML 5 form tags.

Tag Description
<datalist> It specifies a list of pre-defined options for input control.
<keygen> It defines a key-pair generator field for forms.
<output> It defines the result of a calculation.

HTML <form> element


The HTML <form> element provide a document section to take input from user. It provides various
interactive controls for submitting information to web server such as text field, text area, password
field, etc.

Note: The <form> element does not itself create a form but it is container to contain all
required form elements, such as <input>, <label>, etc.

HTML <input> element


The HTML <input> element is fundamental form element. It is used to create form fields, to take
input from user. We can apply different input filed to gather different information form user.
Following is the example to show the simple text input.

HTML TextField Control


The type="text" attribute of input tag creates textfield control also known as single line textfield
control. The name attribute is optional, but it is required for the server side component such as JSP,
ASP, PHP etc.

<!DOCTYPE html>
<html>
<head>
<title>Form Test</title>
</head>
<body>

<form>
Enter something here:
<input type="text" name="name">
</form>

</body>
</html>
Note: If you will omit 'name' attribute then the text filed input will not be submitted to server.

HTML <textarea> tag in form


The <textarea> tag in HTML is used to insert multiple-line text in a form. The size of <textarea>
can be specify either using "rows" or "cols" attribute or by CSS.

<!DOCTYPE html>
<html>
<head>
<title>Form Test</title>
</head>
<body>
<form>
Enter address here : <br>
<textarea rows="5" cols="20"></textarea>
</form>
</body>
</html>
Label Tag in Form
It is considered better to have label in form. As it makes the code parser/browser/user friendly.
If you click on the label tag, it will focus on the text control. To do so, you need to have for attribute
in label tag that must be same as id attribute of input tag.

NOTE: It is good to use <label> tag with form, although it is optional but if you will use it,
then it will provide a focus when you tap or click on label tag. It is more worthy with
touchscreens.
<!DOCTYPE html>
<html>
<head>
<title>Form Test</title>
</head>
<body>

<form>
<label for="name">Enter something here:</label>
<input type="text" id="name" name="name">
</form>

</body>
</html>

HTML Password Field Control


The password is not visible to the user in password field control.
<!DOCTYPE html>
<html>
<head>
<title>Form Test</title>
</head>
<body>

<form>
<label for="pass">Enter something here:</label>
<input type="password" id="pass" name="pass">
</form>

</body>
</html>

HTML 5 Email Field Control


The email field in new in HTML 5. It validates the text for correct email address. You must use @
and . in this field.

<!DOCTYPE html>
<html>
<head>
<title>Form Test</title>
</head>
<body>
<form>
<label for="email">Enter something here:</label>
<input type="email" id="email" name="email">
</form>
</body>
</html>
Note: If we will not enter the correct email, it will display error like:
Radio Button Control
The radio button is used to select one option from multiple options. It is used for selection of
gender, quiz questions etc.
If you use one name for all the radio buttons, only one radio button can be selected at a time.
Using radio buttons for multiple options, you can only choose a single option at a time.

<!DOCTYPE html>
<html>
<head>
<title>Form Test</title>
</head>
<body>

<form>
<label for="gender">Select Gender : </label>
<input type="radio" id="gender" name="gender" value="Male">Male
<input type="radio" id="gender" name="gender" value="Female">Male
</form>

</body>
</html>

Checkbox Control
The checkbox control is used to check multiple options from given checkboxes.

<!DOCTYPE html>
<html>
<head>
<title>Form Test</title>
</head>
<body>

<form>
<label for="check">Select Language : </label>
<input type="checkbox" id="check" name="language" value="Hindi">Hindi
<input type="checkbox" name="language" value="English">English
<input type="checkbox" name="language" value="Marathi">Marathi
<input type="checkbox" name="language" value="Spanish">Spanish
<input type="checkbox" name="language" value="French">French
</form>

</body>
</html>

Note: These are similar to radio button except it can choose multiple options at a time and
radio button can select one button at a time, and its display.

Submit button control


HTML <input type="submit"> are used to add a submit button on web page. When user clicks on
submit button, then form get submit to the server.

<!DOCTYPE html>
<html>
<head>
<title>Form Test</title>
</head>
<body>

<form>
<label for="name">Enter something here:</label>
<input type="text" id="name" name="name">
<input type="submit" value="click">
</form>

</body>
</html>
HTML <fieldset> element:
The <fieldset> element in HTML is used to group the related information of a form. This element is
used with <legend> element which provide caption for the grouped elements.

<!DOCTYPE html>
<html>
<head>
<title>Form Test</title>
</head>
<body>

<form>

<fieldset>
<legend>Personal Information</legend>
<label for="name">Enter something here:</label> <br><br>
<input type="text" id="name" name="name"> <br><br>
<input type="submit" value="click">
</fieldset>

</form>

</body>
</html>

HTML select, option, optagroup Example


<!DOCTYPE html>
<html>
<head>
<title>Form Test</title>
</head>
<body>

<form>
<label for="course">Select Course</label>
<select id="course" name="course">
<option value="JAVA">JAVA</option>
<option value="Framework">Framework</option>
<option value="Web Techonlogy">Technology</option>
</select>

<label for="lang">Select Technology</label>


<select id="lang" name="language">
<optgroup label="JAVA">
<option value="Core Java"> Core Java </option>
<option value="Advance Java"> Advance Java </option>
</optgroup>
<optgroup label="Framework">
<option value="Struts2"> Struts2 </option>
<option value="Spring Boot"> Spring Boot </option>
<option value="Hibernate"> Hibernate </option>
</optgroup>

<optgroup label="Web Technology">


<option value="HTML"> HTML </option>
<option value="CSS"> CSS </option>
<option value="JAVASCRIPT"> JAVASCRIPT </option>
</optgroup>
</select>

</form>

</body>
</html>
Output Example

<!DOCTYPE html>
<html>
<head>
<title>Form Test</title>
</head>
<body>
<form oninput="output.value=name.value ; output2.value=uname.value">
<label for="name">Enter name</label>
<input type="text" id="name" name="name">

<br>
<output name="output"></output>
<br>
<label for="id">Enter name</label>
<input type="text" id="id" name="uname">
<br>
<output name="output2"></output>
</form>
</body>
</html>
HTML Form Example
Following is the example for a simple form of registration.

Example: Registration form

-------------------------------------extra-------------------------------------------------------------------
HTML iframes
HTML Iframe is used to display a nested webpage (a webpage within a webpage). The HTML
<iframe> tag defines an inline frame, hence it is also called as an Inline frame.
An HTML iframe embeds another document within the current HTML document in the rectangular
region.
The webpage content and iframe contents can interact with each other using JavaScript.

<!DOCTYPE html>  
<html>  
<body>  
  
<h2>Iframe - Target for a Link</h2>  
<iframe height="300px" width="100%" src="new.html" name="iframe_a"></iframe>  
<p><a href="https://www.javatpoint.com" target="iframe_a">JavaTpoint.com</a></p>  
<p>The name of iframe and link target must have same value else link will not open as a frame. </
p>  
  
</body>  
</html>  

HTML Video Tag


HTML 5 supports <video> tag also. The HTML video tag is used for streaming video files such as a
movie clip, song clip on the web page.
Currently, there are three video formats supported for HTML video tag:
1. mp4
2. webM
3. ogg

<video controls>  
  <source src="movie.mp4" type="video/mp4">  
  Your browser does not support the html video tag.  
</video>  

Let's see the list of HTML 5 video tag attributes.

Attribute Description
controls It defines the video controls which is displayed with play/pause buttons.
height It is used to set the height of the video player.
width It is used to set the width of the video player.
poster It specifies the image which is displayed on the screen when the video is not played.
autoplay It specifies that the video will start playing as soon as it is ready.
loop It specifies that the video file will start over again, every time when it is completed.
muted It is used to mute the video output.
preload It specifies the author view to upload video file when the page loads.
src It specifies the source URL of the video file.

HTML Audio Tag


HTML audio tag is used to define sounds such as music and other audio clips. Currently there are
three supported file format for HTML 5 audio tag.
1. mp3
2. wav
3. ogg
<audio controls>  
  <source src="koyal.mp3" type="audio/mpeg">  
Your browser does not support the html audio tag.  
</audio>  

You might also like