Scribd
Upload
46 views

HTML Notes

HTML stands for Hypertext Markup Language and is used to define the structure and layout of a web page. HTML documents contain tags that indicate how the content should be displayed in a web browser. Basic HTML tags are used to structure content into headings, paragraphs, lists and define text styling through bold, italics and other formatting.

Uploaded by

Tsering Youdon
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
46 views

HTML Notes

HTML stands for Hypertext Markup Language and is used to define the structure and layout of a web page. HTML documents contain tags that indicate how the content should be displayed in a web browser. Basic HTML tags are used to structure content into headings, paragraphs, lists and define text styling through bold, italics and other formatting.

Uploaded by

Tsering Youdon
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 58

HTML

BASIC
What is HTML?

 HTML stands for Hyper Text Markup Language.


 HTML is document contains text.
 Web browsers read and display document that contain HTML.
• <>Angle brackets contain tag.
• <BODY>Something inside here</BODY>-
Markup Tag/Element.
Requirements for HTML
• Hardware
Desktop/Laptop/Smartphone
• Software
1. Text editor
We use a plain text editor (like Notepad) to edit HTML.
2. Web Browser
To read and display HTML document.
Basic Structure of HTML
<html>
<head>
<title>Information of web page</title
</head>
<body>
content display on browser
</body>
</html>
Basic Structure of HTML
HTML Tags

• HTML tags are commands/keywords surrounded by angle brackets like <HTML>.


• It tell browser what content to display and how to display the content.
• HTML tags normally come in pairs like <P> and </P>.
• The End tag is similar to the Start Tag, except that it has a forward slash before the tag
name.(</P>)
• Start and End tags are also called Opening and Closing Tags respectively.
iPhone SE (2020)
• Attribute: Is a special word used inside tag to specify additional
information to tag such as color.
HTML Tags

• The tags are of two types


1. Container Tag/ Element: It requires a starting as well as an ending tag.
e.g. <HTML>…………….</HTML>
<TITLE>……………</TITLE>
2. Empty Tag/ Element: It requires just a starting tag and not an ending
tag.
e.g. <BR>, <HR>,<IMG>
1. <HTML> Tag attributes

Attribute name Description Value Example

DIR Direction of text Ltr (left to right) <html dir=rtl>


within the entire Rtl (right to left)
document

Lang Language to use in en, fr, de <html lang=fr>


the html document.
2.The BODY tag attributes:

Attribute name Description Value Example

bgcolor Background color of the webpage Color name <body bgcolor=green>

Background To put image instead of colour in Image name and <body background=“hi.jpg”>
the webpage extension

text Colour of text Color name <body text=green>


link To mention link colour. Color name <body link=red>

vlink Visited link color Color name <body vlink=green>

Alink Active link color Color name <body alink=yellow>

Leftmargin / blank area left from the edge of In pixel <body leftmargin=80>
Topmargin webpage
Text formatting using :
<B>,<U> , <I>,<sub> and <sup> Tags

• <B> -To make text/letter bold. E.g <b>Free Tibet</b> Output: Free Tibet
• <U> -To make text/letter Underline. E.g <u>Free Tibet</u> Output: Free Tibet
• <I> -To make text/letter Italic. E.g <i>Free Tibet</i> Output: Free Tibet
• <sub>-To make text/letter Subscript. E.g H <sub>2 </sub> Output: H2O
• <sup>-To make text/letter Superscript. E.g 1 <sub>st </sup> Output: 1st
OUTPUT/RESULT OF
HTML CODE HTML CODE
3. Text Formatting
• Text formatting tags modify the text between the opening tag and the closing tag
• Ex. <b>Hello</b> makes “Hello” bold

<b></b> Bold e.g. <b>Tibet</b> Output: Tibet

<i></i> Italicized e.g <i>Tibet</i> Output: Tibet

<u></u> Underlined e.g <u>Tibet</u> Output: Tibet

<sup></sup> Samplesuperscript e.g 1<sup>st</sup> Output: 1st

<sub></sub> Samplesubscript e.g H<sub>2</sub>O Output: H2O

15
3. HTML HEADINGS
• HTML Headings
• Headings are defined with the <h1> to <h6> tags.
• <h1> defines the largest heading.
• <h6> defines the smallest heading.

• Example
<h1>This is a heading1</h1>
<h2>This is a heading2</h2>
<h3>This is a heading3</h3>
Browsers automatically adds an empty line before and after headings.
BASIC HTML TAGS
• Example
<html>
<head>
<title>Heading</title>
</head>
<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>
Attributes of Heading ( Align)
• The alignment can be of LEFT, CENTER and RIGHT values. The default
alignment is LEFT for <H#> tags.
• E.g. <H2 align=center>Level 2 heading</H2>
Text formatting using <P> and <BR> Tags

• The browser does not recognize returns (enter), tabs or even more than one space between letters. You must
tell it when to go the next line.
• Breaking Lines- <BR>
• To simply end one line and jump to the next, use a line break (<BR>). It is an empty tag.
•
• Changing paragraph Alignment <P>- ALIGN attribute
• The text that you type between <P> and </P> tags is by default left aligned. To change its alignment, you
can use ALIGN attribute of <P> tag.
• <P align=alignment>
• Where alignment can be either be LEFT or RIGHT or CENTER.
• E.g. <P align=left>
The text Formatting with <BASEFONT> and <FONT>

1. The <BASEFONT> Tag


Lets you define the basic size for the font.(Text/Letter)
Attribute( size):
The size can have absolute value from 1 to 7. The base font size is increased or
decreased by that relative amount i.e. size=+1 will result into size =5 if the previous
size is set to 4. Ending tag </BASEFONT> is optional.

Each virtual size is successively 20% larger or smaller than the default font size
3.
2. The <FONT> tag:

• The <FONT> tag lets you change the size, style and color of text.
• Attributes:
1. Size: Lets you change the size of text(size =1-7)
e.g. <FONT size=7> Hello</FONT>
2. Color: To change color of the text.
e.g. <font color=red>Free Tibet</font>
3. Face: To change font type of the text you are displaying.
e.g. <font face=”Broadway, Arial, Times new roman”>Save Tibet</font>
Complete example of <font> tag.
<font size=6 color=blue face=“comic san ms”>Free Tibet</font>
Horizontal Rules- <HR> Tag.
• The <HR> tag produces a horizontal line spread across the width of the browser
window.
• Attributes:
1. Size: To set the size(thickness) of horizontal line.
e.g. <hr size=5>
2. Width: The length of horizontal rules can be controlled with width attribute
and value can be given in pixel or percentage.
e.g. <hr width=200> or <hr width=50%>

Default size of horizontal rule is 3 pixels.


3. Color: To set the color for horizontal line/rule.
e.g. <hr color=green>
4. No shade: To make 3D horizontal rules to a flat(2D) rule just add
noshade to <HR>.
e.g. <HR size=36 noshade>
Complete example of <Hr> tag.
<hr size=6 width=80% color=green noshade>
10. Lists.

There are three basic types of lists in HTML.


• Unnumbered /Unordered
• Numbered/Ordered
• Definition
1. Unnumbered or Unordered lists<UL>:
• Are indented lists with a special bullet symbol in front of each item.
• To make an unnumbered/bullet list
• Start with an opening list <UL> (for unnumbered list) tag.
• Enter the <li> (list item) tag followed by the individual item, no closing
</li> tag is needed.
• End the entire list with a closing list </UL> tag.
• Attributes of the unnumbered lists: The by default, a solid circle is used
for the bullets. However, you can change the bullet style using type
attribute.
• The type attribute can contain value:
• Disc (a solid circle)
• Square (a solid square)
• Circle (a hollow circle)
E.g. 1 <UL type=disc> • one
<LI>one
<LI>two
• two OUTPUT
CODE
<LI>three • three
</UL>
E.g. 2 <UL type=circle> oone
<LI>one
<LI>two
otwo OUTPUT
CODE
<LI>three othree
</UL>
E.g. 3 <UL type=square>  one
<LI>one
<LI>two
 two OUTPUT
CODE
<LI>three  three
</UL>
2. Numbered or Ordered lists<OL>:
• Are indented lists that have numbers or letters in front of each
item.
• Attributes of the Numbered Lists:
• The start attribute: The start attribute for the <OL> tag lets you
change the beginning value.
• The type attribute: By default, browsers number ordered list items
with a sequence of Arabic numerical. You can use the type attribute
with the <OL> tag to change the numbering style itself.
The type attribute

Type value General style Sample sequence


A Capital letters A, B, C, D
a Lowercase Letters a,b,c,d
I Capital roman numerals I, II, III, IV
i Lowercase roman numerals i,ii,iii,iv
1 Arabic numerals 1,2,3,4,
E.g. 1
Fruits: Fruits:
<OL type=”A”> A. Apple
OUTPUT
<LI>Apple.
CODE B. Orange
<LI>Orange
C. Mango
<LI>Mango
</OL>
E.g. 2
Fruits: Fruits:
<OL type=”a” start=3>
c. Apple
<LI>Apple. OUTPUT

<LI>Orange
CODE
d. Orange
<LI>Mango e. Mango
</OL>
E.g. 3
Fruits: Fruits:
<OL type=”i” >
i. Apple
<LI>Apple.
<LI>Orange
CODE
ii. Orange OUTPUT

<LI>Mango iii. Mango


</OL>
E.g. 3
Fruits: Fruits:
<OL start=5 >
<LI>Apple.
5. Apple OUTPUT
CODE
<LI>Orange 6. Orange
<LI>Mango
</OL>
7. Mango
3. Definition/Description Lists (<DL>)
• Are indented lists without any bullet symbol or any number in front of each item
and usually consists of alternating a definition term (coded as <DT>) and a
definition description (coded as <DD>).
• E.g. <DL>
HTML CODE Output:
<DT>TCV
TCV
<DD>Tibetan Children’s Village Tibetan Children’s
</DL> Village
11. INSERTING IMAGES:

• You can insert different types image in a web page. Like


• GIF (Graphics Interchange Format)
• PNG (Portable Network Graphics)
• JPEG (Joint Photographic Experts Group)
• Web browsers can display images in your document if they are in above format.
• The image can be insert in a web page by using tag<IMG >
• E.g. <img src=”tashi.jpg”>
The attributes of <img> tag are:

1. The src attribute-to specify image source: It is the value of the image
file’s URL or name of the image.
E.g. <img src=”d:\html\plant.gif”> or <img src=“plant.jpg”>
<img src="https://tibet.net/HHDL.png">
2. The alt attribute-to specify alternate text: The alt attribute specifies
alternative text the browser may show image display is not possible or
disable by the user. <IMG src=”newpic.gif” alt=”This is New Pic”>

The value for the alt attribute is a text string of up to 1024 characters, enclosed
in quotation marks if you include spaces or other punctuation.
3. The align attribute-for image alignment: The HTML standard
specifies five image-alignment attributes values: left, right, top,
middle and bottom.
e.g.<img src=“Tibet.jpg” align=right>
4. The height and width attributes: it specifies the height and
width of the image inserted in the web page.
e.g. <img src=“tibet.jpg" width="500" height="600">
5. The border attribute: it specifies the border to be placed
around the image.
e.g. <img src=”hello.jpg” alt=”hello test” align=right height=300 width=300
border=5>
TABLE
• Table display the data in tabular form. It allows you to arrange
data into rows and columns of cells.

VARIOUS TABLE TAGS


• HTML lets you create tables with the following Table tags:
1.<TABLE> S.NO ROLL NO NAME
2.<CAPTION> 1 1234 TASHI DHONDUP
3.<TR> 2 1235 TENZIN DOLMA
4.<TH>
3 1236 KARMA SONMA
5. <TD>
<table border=1>
<tr>
Table and Code <td>Cell 1</td>
<td>Cell 2</td>
</tr>
Cell 1 Cell 2
<tr> <tr>
Table
Cell 3 Cell 4 <td> Cell 3</td>
row Cell 5 Cell 6 <td> Cell 4</td>
</tr>
<tr>
<td> Cell 5</td>
<td> <td> Cell 6</td>
Table data/Cell </tr>
(Cell 1-Cell 6)
</table>
S.NO TAG ATTRIBUTE DESCRIPTION VALUE EXAMPLE
1 BORDER To specify the thickness of the Must be number e.g <table border=1>
table border. 1,2,
2 WIDTH To set table width Specify width either in <table width=300>
Pixel or Percentage <table width=80%>
<TABLE>
3 BORDERCOLOR To specify the border color of the Color name <table bordercolor=red>
table.
4 BGCOLOR To specify the table background Color name <table bgcolor=green>
color.
5 BACKGROUND To specify an image as the Name and path of the <table
background of the table. image background=“Tibet.jpg”>
6 CELLPADDING Amount of space between the cell Must be any number <table cellpadding=3>
border and the cell content
7 CELLSPACING To specify the amount of space Must be any number <table cellspacing=3>
between two cells.
8 ALIGN To specify the alignment of the Left, Right, Center <table align=center>
table

e.g. <table border=2 bordercolor=red width=80% bgcolor=cyan align=center cellpadding=2


cellspacing=3>
Classwork
Please write the HTML code for the below table.
S.NO ROLL NO NAME

1 1234 TASHI DHONDUP

2 1235 TENZIN DOLMA

3 1236 KARMA SONMA

4 1237 TASHI DOLMA

5 1238 KESANG DIKI


Classwork 1
Please write the HTML code for the below table.
Class Students

VII 70

VIII 60

IX 40

X 32
STUDENT’S NAME FATHER’S NAME MOTHER’S NAME
KARMA TASHI TENZIN SONAM TASHI DOLMA
KALSANG LHAMO TENZIN DHONDUP PHUNTSOK DOLMA
<html>
<head>
<title>Table 2</title>
</head>
Table <body>
<table border=1 width=80%>
<tr bgcolor=yellow>
<th bgcolor=red>Student's Name</th>
<th>Father's Name</th>
<th>Mother's Name</th>
</tr>
<tr>
<td align=center>Karma Dolma</td>

CODE
<td background="pretty.jpg">Tashi
Tsering</td>
<td>Tenzin Dolma</td>
</tr>
</table>
</body>
</html>
Table Revision
• Tags used to create table are
2. <tr>/<td>/<th> attributes
1. <table> attributes • ALIGN
• BORDER • BACKGROUND
• WIDTH • BGCOLOR
• BORDERCOLOR
3. <td>/<th> attributes
• BGCOLOR, • ROWSPAN
• BACKGROUND • COLSPAN
• CELLPADDING • VALIGN
• CELLSPACING
4. <caption>
• ALIGN
3/07/2020
S. TAG ATTRIBUTE DESCRIPTION VALUE EXAMPLE
N
O
1 ALIGN To specify the content alignment left, center, right, justify <tr align=right>
<TR> of the row/cell <td align=right>
2 BACKGROUND To specify an image as the Name and path of the <tr background=“Tibet.jpg”>
<TD> background of the table image <td background=“Tibet.jpg”>
row/cell.
3 <TH> BGCOLOR To specify the row/cell Color name <tr bgcolor=green>
background color. <td bgcolor=green>
4 ROWSPAN How many rows space Specify the number of <td rowspan=3> SHORT
<TD> span/occupy by a cell. rows occupy by a cell. BREAK </td>
5 COLSPAN How many columns space Specify the number of <td colspan=2> BREAK
<TH> span/occupy by a cell. columns occupy by a </td>
cell.
(Table
6 Header) VALIGN To specify the Vertical Top, middle and bottom. <td rowspan=3
alignment of the data in a cell. valign=middle> Break </td>
7 To define the title or caption for <caption>TIME TABLE</caption>
<CAPTION>
the table
The <TR> Tag : It stands for Table Row. <TR> is used when you want a new table row to begin.
The <TH> Tag: It stands for Table Header. The contents declared as header are displayed in a bold.
Rowspan
R1
• How many rows space span/occupy by a ROWSPAN
cell. R2
<table border=1 width=40% height=40%>
<tr>
<td bgcolor=yellow>R1</td>
<td rowspan=2 bgcolor=green>ROWSPAN</td>
</tr>
<tr>
<td bgcolor=orange>R2</td>
</tr>
</table>
10/10/2020
Colspan
COLSPAN
• How many columns space span/occupy by a
cell. C1 C2
<table border=1 width=40% height=40%>
<tr>
<td bgcolor=yellow colspan=2>COLSPAN</td>
</tr>
<tr>
<td bgcolor=orange>C1</td>
<td bgcolor=green>C2</td>
</tr>
</table>
Embedding/inserting Video in the HTML
• The <video> tag allows to insert video in the HTML(website).
• Video format supported are .MP4, WEBM, OGG
• Attributes of <video> tag are
1. Src: (The URL/name of the video to embed)
2. Controls: (to control video playback, including volume, seeking, and pause/resume playback.)
3. Preload: (will load video when page load and let it ready to run)
4. Height: (the height of the video's display area)
5. Width: (the width of the video's display area)
6. Autoplay: (to play video automatically)
e.g. <video src="kitties.mp4" autoplay height=400 width=400 controls></video>
Embedding/inserting Audio in the HTML
• The <audio> tag allows to insert music in the HTML(website).
• Audio format supported are .MP3, WAV, OGG
• Attributes of <audio> tag are
1. Src
2. Autoplay
3. Controls:
4. Preload:
e.g. <audio src="kitty.mp3" autoplay controls></audio>
LINK

• It allows you to jump to a document(webpage) or section of same document when


you click on text or image.
• A Hyperlink is a link from a hypertext file to another document, file or location.
• Types of Link
1. External: It links two different documents(webpages) when clicking on a
hyperlink and new document will open.
2. Internal : It links various sections of same document(webpage). Like top to
bottom, bottom to Top , bottom to middle.
Creating link
• HTML’s tag to create linking is <A> which stands for ANCHOR.
• <A> attributes.
1. HREF – HYPER REFERENCE (to specify the URL/name of the target document of the link.)
e.g <a href=https://tibet.net>Link to Tibet</a> OR <a href=“tashi.htm”>My page</a>
2. Target: To specifies where to open the linked document.
The target attribute can have one of the following values:
3._self - Default. Opens the document in the same window/tab as it was clicked
4._blank - Opens the document in a new window or tab
e.g. <a href=" https://tcvbyl.net/ “ target="_blank">Visit My School</a>
3. Name: To refer to some part of a webpage .
e.g <A NAME=”Infant”> Infant Section </A>
<A href=”#Infant”> Link to Infant Section </A>
1. External Link
• Requires: More than one web page.
• <a href=“Tashi.htm”>Link to My Page</a>
Or
• <a href=“tcvbyl.net”>My School</a>

Webpage A LINK Webpage B


2. Internal Link
• Requires: One web page.
• Steps: Top
1. We have mark where we want to link in the same document.
E.g <A NAME=”Infant”> Infant Section </A>
2. Link to the marked section.
E.g <A href=”#Infant”> Link to Infant Section </A> Middle

Bottom
R1
ROWSPAN
R2
COLSPAN

PRACTI
CAL ON
C1 C2
R1
ROWSPAN
R2

You might also like