Scribd
Upload
25 views

HTML Basics: Codes, Structure, & My First Homepage

HTML (Hypertext Markup Language) is used to structure and format web pages. It uses tags enclosed in angle brackets to denote elements like headings, paragraphs, and links. A basic HTML page includes opening and closing <html>, <head>, <title>, and <body> tags. The <head> contains meta information and the <body> holds visible page content. Common tags introduce text styling, colors, images, and links to other URLs. Learning HTML allows creating simple yet informative web pages.

Uploaded by

laraibgull
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
25 views

HTML Basics: Codes, Structure, & My First Homepage

HTML (Hypertext Markup Language) is used to structure and format web pages. It uses tags enclosed in angle brackets to denote elements like headings, paragraphs, and links. A basic HTML page includes opening and closing <html>, <head>, <title>, and <body> tags. The <head> contains meta information and the <body> holds visible page content. Common tags introduce text styling, colors, images, and links to other URLs. Learning HTML allows creating simple yet informative web pages.

Uploaded by

laraibgull
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 13

HTML Basics

Codes, Structure, & My First


Homepage
What is HTML?
HTML (Hyper-text Markup Language)
 A markup language formats text in-
between two “tags”. These look like:
<code>formatted text</code>
 <code> begins the formatting tag
 </code> ends the formatting tag
 These tags are then read by a Browser,
which translates the tags into the
formatting that they represent.
Basic Tags
 HTML
 <HTML></HTML>
 These tags begin and end an HTML document.
 HEAD
 <HEAD></HEAD>
 These tags are in the beginning of the document. Important
information is stored in-between these tags including: title,
meta-data, styles, and programming scripts
 TITLE
 <TITLE></TITLE>
 These tags are in-between the HEAD tags and contain the text
that appears in the title of the Web page.
 BODY
 <BODY></BODY>
 As you may have guessed, the BODY tags contain all the text
in the body of the document.
Basic Format of a Web Page
<html> This
This example
example is is aa
<head> complete
complete Web Web page.
page. IfIf
<title> viewed
viewed in in aa browser,
browser,
such
such asas Internet
Internet
Hello World Explorer,
Explorer, itit would
would have
have
</title> the
the title
title “Hello
“Hello World”
World”
</head> and
and the
the content
content “Hello
“Hello
<body> World”.
World”.
Hello World
</body>
</html>
Adding Color, Links, and Images
<html> Font Color:
Font Color:
<head>  <font
<fontcolor=“#ff0000”>
color=“#ff0000”></font>

</font>
<title>  The color above is a hexadecimal
 The color above is a hexadecimal
Hello World number
numberthat thatrefers
referstotoaacolor
colorononpalate
palate
</title> of colors
of colors
 ItItisisalso
alsopossible
possibletototype
typeininthe
thenames

</head> names
of popular colors (i.e., white, black, red,
<body> of popular colors (i.e., white, black, red,
etc.)
Hello World etc.)
 http://www.w3schools.com/html/html_c

<p> http://www.w3schools.com/html/html_c
olors.asp
olors.asp
<font color="#ff0000">This text is
red</font> Links:
Links:
<br>  <a href=“URL”>linked text</a>
 <a href=“URL”>linked text</a>
<font color="red">This text is red, Images:
too</font> Images:
 <img
<imgscr=“test.gif”>
scr=“test.gif”>(no
(noend
endtag)

<p> tag)
<a href="http://www.google.com">Click Line
LineBreaks:
Breaks:(notice
(noticethe the22used
usedhere)
here)

 <P>
<P> - this is a paragraph break. ItItputs
- this is a paragraph break. puts
this link to go to Google.com</a> aaspace between 2 paragraphs.
space between 2 paragraphs.
<p> 
 <BR>
<BR>- -this
thisisisaaline
linebreak.
break. ItItonly
onlygoes
goes
<img src="test.gif"> totothe next line.
the next line.
</body>
</html>
My First Web Page
<html>
<head> 1. View
1. Viewthis
thissample
sample(click
(click
<title> link)
link)
Hello World
</title> 2. When
2. Whenthethepage
pageopens
opensin
in
</head>
<body>
your
yourbrowser
browser
Hello World 1.
1.
Go
Gototothe
thebrowser
browsermenu.
menu.
<p>
<font color="#ff0000">This text is 2.
2.
Go
Gototo“View”
“View”>>
>>“Source”
“Source”
red</font> (in Netscape it is called
(in Netscape it is called
<br> “Page
<font color="red">This text is red, “PageSource”
Source”
3. This
3. Thisisishow
howyou
youcan
cansee
seethe
too</font>
<p>
the
<a href="http://www.google.com">Click
source
sourcecode
codeofofany
anyWeb
Web
this link to go to Google.com</a> page.
page.
<p>
<img src="test.gif"> 4. Go
4. Gototoyour
yourfavorite
favoriteWeb
Web
</body> page
pageand
andgive
givethis
thisaatry.
try.
</html>
You’ll
You’llprobably
probablyseeseethat
thatitit
isissignificantly
significantlymore
more
complicated
complicatedthanthanthis.
this.
Exercise
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This
text is bold</b>
</body>
</html>
Exercise 2: Heading, Paragraph, Line
Breaks
<html>
<head>
<title>Title of page</title>
</head>
<body>
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<p>This <br> is a para<br>graph with line breaks</p>
</body>
</html>
Exercise 3: Background Color
<html>
<head>
<title>Title of page</title>
</head>
<body bgcolor="yellow" >
This is my first homepage. <b>This
text is bold</b>
</body>
</html>
Exercise 4: HTML Table
<html>
<head>
<title>Title of page</title>
</head>
<body bgcolor="yellow" >
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</body>
</html>
Exercise 5: Lists
<html>
<head>
<title>Title of page</title>
</head>
<body bgcolor="yellow" >
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
</body>
</html>
Exercise 6: Inserting Images
<html>
<body>
<p> An image: <img src="constr4.gif" width="144"
height="50"> </p>
<p> A moving image: <img src="hackanm.gif"
width="48" height="48"> </p>
</body>
</html>
Exercise 7: Adding Frames
Vertical Frameset Horizontal Frameset

<html> <html>
<frameset cols="25%,50%,25%“ <frameset rows="25%,50%,25%">
rows=“25%,50%,25%”>
<frame src="frame_a.htm">
<frame name “MainFrame”
<frame src="frame_b.htm">
src="frame_a.htm">
<frame src="frame_c.htm">
<frame src="frame_b.htm">
</frameset>
<frame src="frame_c.htm">
</html>
</frameset>
</html>

<a href=“httt://www.google.com target = “MainFrame”> Google </a>

You might also like