html body { margin-top: 50px !important; } #top_form { position: fixed; top:0; left:0; width: 100%; margin:0; z-index: 2100000000; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; border-bottom:1px solid #151515; background:#FFC8C8; height:45px; line-height:45px; } #top_form input[name=url] { width: 550px; height: 20px; padding: 5px; font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif; border: 0px none; background: none repeat scroll 0% 0% #FFF; }
tags. The contains meta information and the 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.">
Scribd
Upload
30 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)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
30 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)
We take content rights seriously. If you suspect this is your content, claim it here.
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