Scribd
Upload
36 views

HTML Notes

Uploaded by

123iamfinethankyouandyou
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
36 views

HTML Notes

Uploaded by

123iamfinethankyouandyou
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 13

HTML <Hyper Text Markup Language>

Step 1: Open Notepad (Window)


Step 1: Open TextEdit (Mac)
Step 2: Write Some HTML in the Notepad.
Step 3: Save the HTML Page on your computer with the extension of “.html “
Step 4: View the HTML Page in Your Browser.

Head of Web page

Body of Web page

All HTML documents are divided into two main parts: the head and the body. It also has
four primary tags: <html>, <head>, <title> and <body>. See fig.1
HTML tags are element names surrounded by angle brackets. HTML tags normally come
in pairs like <p> and </p>.
The first tag in a pair is the start tag, the second tag is the end tag.
The end tag is written like the start tag, but with a forward slash inserted before the tag
name.
The start tag is also called the opening tag, and the end tag the closing tag.
<html>…</html>
Every HTML document begins and ends with the <html> tag. This tells the browser
that the following document is an html file.
<head>…</head>
The <head> tag contains the title of the document along with general information
about the file, like the author, copyright, keywords and/or a description of what appears on
the page.

1
<title>…</title>
Appears within the <head> tags and gives the title of the page. Try to make your titles
descriptive, but not more than 20 words in length. The title appears at the very top of the
browser page on the title tab.
<body>…</body>
The main content of your page is placed within the body tags: your text, images, links,
tables and so on.
<!DOCTYPE html> declaration defines this document to be HTML5

1. Structure of HTML

Fig:1

2. <meta> Element
The <meta> element is used to specify which character set is used, page description,
keywords, author, and other metadata.
Metadata is used by browsers (how to display content), by search engines (keywords),
and other web services.
 Define the character set used:
<meta charset="UTF-8"> The default character set in HTML 5 is UTF-8.
 Define a description of your web page:
<meta name="description" content="Free Web tutorials">
 Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
 Define the author of a page:
<meta name="author" content="John Doe">
 Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
 Define viewport element in all your web pages:

2
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
</head>
<body>
<p>All meta information goes before the body. London is the capital city of England. It is the
most populous city in the United Kingdom, with a metropolitan area of over 13 million
inhabitants.</p>
</body>
</html>

Horizontal Rules
The <hr/> tag defines a thematic break in an HTML page, and is most often displayed
as a horizontal rule. <hr color=red size=3 width=75%>

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:

Style Attribute
Setting the style of an HTML element, can be done with the style attribute.
<tagname style="property:value;">
 Background Color
<body bgcolor=blue>
<body style="background-color:powderblue;">
 Text Color
<h1 font color=red> <h1 style="color:blue;">
<font color=yellow> <p style="color:red;">
 Fonts
<h1 font face=book Antiqua> <h1 style="font-family:verdana;">
<font face=book Antiqua> <p style="font-family:courier;">

3
 Text Size
<h1 style="font-size:300%;">
<font size=6> <p style="font-size:160%;">
 Text Alignment {centre,right}
<h1 style="text-align:center;">
<font align=center> <p style="text-align:center;">

6. Formatting Elements
 <b> - Bold text
 <strong> - Important text
 <i> - Italic text
 <u> - Underline text
 <em> - Emphasized text
 <mark> - Marked text {Highlight color}
 <small> - Small text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text
 <strike> - Strikethrough text

7. Color Names

Example:
<h1 style="background-color:DodgerBlue;">
<p style="background-color:Tomato;">

8. Border Color

4
Example:
<h1 style="border:2px solid Tomato;">
<h1 style="border:2px solid DodgerBlue;">
<h1 style="border:2px solid Violet;">
<p style=”color:orange;border-width:10px;border-style:sold;border-color:green;”>

Language

<html lang="en">
...
</html>

Heading

h1

h2

h3
h4
h5
h6

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

List

There are three types of lists in HTML.


(1) Ordered list (Numbered items) <ol>  1,2,3,…….
<ol type= > (2) Unordered list (Bulleted items)
<li> </li> <ul type= >
<li> </li> <li> </li>
<li> </li> <li> </li>
<li> </li>
Type=A  A,B,C,….
Type=a  a,b,c,….. Type= disc  
Type=I  I,II,III,…… Type= circle  
Type= square  

5
(3) Definition list (A list of items, with a description of each item)

<dl> definition list


<dt> (defines terms/names)
<dd> (describes each term/name)

Nested HTML Lists


<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

List on a Specific Number


< ol Start = “ “>

Exercises
(I) Write the HTML coding for the following printing format.
1. Chapter One 1. Item A
 Section One
 Section Two
2. Item B
 Section Three  Subitem B.1
2. Chapter Two  Subitem B.2
3. Chapter Three
3. Item C

6
Tables
Table is defined with the <table> tag.
Eg: <table style="width:100%">

Each table row is defined with the <tr> tag.


A table header is defined with the <th> tag. By default, table headings are bold and
centered.
A table data/cell is defined with the <td> tag. The <td> elements are the data
containers of the table. They can contain all sorts of HTML elements; text, images, lists,
other tables, etc.
<table> to declare a table
</table> to end the table
<th> to declare the start of header cell in bold
</th> to declare the end of header cell in bold
<tr> to declare the start of new row
</tr> to declare the end of new row
<td> to declare a cell
</td> to close a cell

Eg:
<!DOCTYPE html>
<html>
<body>
<h2>Basic HTML Table</h2>

<table style="width:100%;">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>

7
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>

Table with cell spacing

<table border=1>
<tr align=center bgcolor=orange>
<td rowspan=3 align=center> Title goes here</td>
<td width=50> A </td>
<td width=50> D </td>
</tr>
<tr align=center>
<td width=50> B </td>
<td width=50> E </td>
</tr>
<tr align=center>
<td width=50> C </td>
<td width=50> F </td>
</tr>
</table>

Movind Text with Marquee


<marquee behavior=alternate direction=right/left/up/down>
</marquee>

Eg:
<marquee> Hello IIP !! </marquee>

<Marquee width=200 Height=50> Howdy! </marquee>

8
BEHAVIOR=ALTERNATE makes the content bounce back and forth, all of it remaining
visible all the time

<marquee behavior=alternate direction=up>

BEHAVIOR=SCROLL, which is the default, indicates that the content should scroll off the
edge of the marquee area, then reappear on the other side.

<marquee behavior=scroll> Have a Good Day!!! </marquee>

SCROLLDELAY, together with SCROLLAMOUNT, sets the speed of the scrolling.


SCROLLDELAY sets the amount of delay in milliseconds (a millisecond is 1/1000th of a
second). The default delay is 85.

<marquee scrolldelay=500> Good Friendship *** </marquee>

SCROLLAMOUNT sets the size in pixels of each jump. A higher value


for SCROLLAMOUNT makes the marquee scroll faster. The default value is 6.

<marquee scrollamount=50> HELLO </marquee>

BEHAVIOR=SLIDE is the contents stop scrolling as soon as the reaches the left side.

<marquee behavior=slide> Morning@@@</marquee>

BGCOLOR sets the background color of the marquee.


<marquee bgcolor=blue> GOOD DAY </marquee>

HSPACE sets the horizontal space to the left and right of the marquee. VSPACE sets the
vertical space at the top and bottom of the marquee.

<marquee hspace=50 width=”25%” bgcolor=yellow><p> HOWDY THERE !</p> <p>


Good to see ya!</p><p> Hi There!</p> </marquee>

Hello.<marquee vspace=50 bgcolor=green> HOWDY THERE </marquee>


<marquee style=”font-family:Book Antiqua; color:#FFFFFF” bgcolor=”#000080”
direction=”up” height=”80”> This is an example of Marquee
direction</marquee>

Adding images to web pages

<img src="location of the file\filename">

The alt attribute is also useful if the image cannot be displayed (e.g. if it does not exist):

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

9
Preparing audio and video

Before HTML5, audio or video could only be played in a browser with a plug-in (like
flash).

The HTML5 <video> element specifies a standard way to embed a video in a web
page. To show a video in HTML, use the <video> element:

<video width="320" height="240" controls>


<source src="movie.mp4" type="video/mp4">
</video>

Autoplay - Specifies that the video will start playing as soon as it is ready.
Loop - Specifies that the video will start over again, every time it is finished
Muted - Specifies that the audio output of the video should be muted

Eg:

<!DOCTYPE html>
<html>
<body>
<video controls autoplay muted width="400">
<source src="C:\Users\User\Desktop\
2015_04_Vocational_training_movie_with_questions.mp4" type="video/mp4">
</video>
<p>

Video courtesy of
<a href="https://www.youtube.com/watch?v=glz5xF5uMmc" target="_blank">Myo
Gyi</a>.
<a href="C:\Users\User\Desktop\Thardilu.mp4" target=_blank> Click here to watch video
file !!</a>
</p>

</body>
</html>

Audio File
To play an audio file in HTML, use the <audio> element:

<audio controls>
<source src="horse.mp3" type="audio/mp3">
</audio>

Eg:

10
<!DOCTYPE html>
<html>
<body>

<audio controls loop>


<source src="ae_thel_tin_zar_maw.mp3" type="audio/mp3">
</audio>

</body>
</html>

Links with CSS and HTML

<link rel="stylesheet" href="styles.css">

Links

Hyperlinks are defined with the HTML <a> tag:


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

Link Titles

<a href="Name of the page" title="title name">Testing of link title</a>

Email Link
<a href=”mailto:mail address”>----------------</a>

Inline frames
<iframe src="URL"></iframe>
<iframe src="demo_iframe.htm" height="200" width="300"></iframe>

11
Table grouping with Style

The <thead> tag is used to group header content in an HTML table.The <thead> element is
used in conjunction with the <tbody> and <tfoot> elements to specify each part of a table
(header, body, footer).

Eg:
<!DOCTYPE html>
<html>
<head>
<style>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}

table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>

<p><b>Tip:</b> The thead, tbody, and tfoot elements will not affect the layout of the table
by default. However, you can use CSS to style these elements.</p>
</body>
</html>

12
Navigation <nav>

Element represents a section of a page whose purpose is to provide navigation links,


either within the current document or to other documents.

Eg:
<!DOCTYPE html>
<html>
<head>
<title>nav tag</title>
<style>
nav {
border:2px solid red;
background-color:Yellow;
padding:8px;
width:50%;
}
</style>
</head>
<body><center>
<nav>
<a href = "#">Home</a>
<a href = "#">Interview</a>
<a href = "#">Languages</a>
<a href = "#">Data Structure</a>
<a href = "#">Algorithm</a>
</nav>
</center></body> </html>

13

You might also like