Scribd
Upload
70 views

HTML Can Be Edited by Using A Professional HTML Editor Like

HTML Basics provides an overview of key HTML elements and tags for formatting text on web pages. It defines common tags like <html>, <head>, <body>, <p>, <h1>-<h6> for headings, <a> for links, <img> for images, and <br> for line breaks. It also covers the <!DOCTYPE> declaration and using the <style> and <link> tags to style content with CSS.

Uploaded by

88nikp
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
70 views

HTML Can Be Edited by Using A Professional HTML Editor Like

HTML Basics provides an overview of key HTML elements and tags for formatting text on web pages. It defines common tags like <html>, <head>, <body>, <p>, <h1>-<h6> for headings, <a> for links, <img> for images, and <br> for line breaks. It also covers the <!DOCTYPE> declaration and using the <style> and <link> tags to style content with CSS.

Uploaded by

88nikp
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 8

HTML Basics

HTML can be edited by using a professional HTML editor like:


Adobe Dreamweaver
Microsoft Epression !eb
"offee"up HTML Editor
tet editor like #otepad $%"& or TetEdit $Mac&'
The DOCTYPE declaration defines the document type
The <!DOCTYPE html> declaration is the doctype for HTM!"
The te#t $et%een <html> and <&html> descri$es the %e$ pa'e
The te#t $et%een <$ody> and <&$ody> is the (isi$le pa'e content
The te#t $et%een <h)> and <&h)> is displayed as a headin'
The te#t $et%een <p> and <&p> is displayed as a para'raph
HTML Attributes
*ttri$ute Description
class +pecifies one or more classnames for an element ,refers to a class in a
style sheet-
id +pecifies a uni.ue id for an element
style +pecifies an inline C++ style for an element
title +pecifies e#tra information a$out an element ,displayed as a tool tip-
HTML Tags : (tagname) "ontent (*tagname)
T+e (,D-"T.%E) Declaration
/ The <!DOCTYPE> declaration helps the $ro%ser to display a %e$ pa'e correctly"
/ There are many different documents on the %e$0 and a $ro%ser can only display an HTM pa'e
)112 correctly if it 3no%s the HTM (ersion and type used"
HTML Headings
HTM headin's are defined %ith the (+/) to (+0) ta's"
Eample:
<h)>This is a headin'<&h)>
<h4>This is a headin'<&h4>
<h5>This is a headin'<&h5>
HTML %aragrap+
HTM para'raph are defined %ith the (p) ta'"
Eample:
<p>This is a para'raph"<&p>
HTML Links
HTM lin3s are defined %ith the (a) ta'"
Eample:
<a href67http8&&%%%"'oo'le"com7>This is a lin3<&a>
HTML 1mages
HTM 9ma'es are defined %ith the (img) ta'"
Eample:
<im' src67'oo'le":p'7 alt67'oo'le"com7 %idth67)1;7 hei'ht67);47>
HTML Link Break
HTM in3$rea3are defined %ith the (br) ta'"
Eample:
<p>This is<$r>a para<$r>'raph %ith line $rea3s<&p>
HTML Tags
Ta' Description
<$>< Defines $old te#t
<em>< Defines emphasi=ed te#t
<i>< Defines a part of te#t in an alternate (oice or mood
<small>< Defines smaller te#t
<stron'>< Defines important te#t
<su$>< Defines su$scripted te#t
<sup>< Defines superscripted te#t
<ins>< Defines inserted te#t
<del>< Defines deleted te#t
<mar3>< Defines mar3ed&hi'hli'hted te#t
HTML "omments
HTM Comments
Eample:
<!// >rite your comments here //>
HTML +ead elements
Ta' Description
<head>< Defines information a$out the document
<title>< Defines the title of a document
<$ase>< Defines a default address or a default tar'et for all lin3s on a
pa'e
<lin3>< Defines the relationship $et%een a document and an e#ternal
resource
<meta>< Defines metadata a$out an HTM document
<script>< Defines a client/side script
<style>< Defines style information for a document
HTML base tag
The <$ase> ta' specifies the $ase ?@&tar'et for all relati(e ?@s in a pa'e8
Eample:
<head>
<$ase href67http8&&%%%"'oo'le"com&7 tar'et67A$lan37>
<&head>
HTML Link tag
The <lin3> ta' is most used to lin3 to style sheets8
Eample:
<head>
<lin3 rel67stylesheet7 type67te#t&css7 href67mystyle"css7>
<&head>
HTML 2tyle tag
The <style> ta' is used to define style information for an HTM document"
Eample:
<head>
<style type67te#t&css7>
$ody B$ac3'round/color8redCD
p Bcolor8$lueCD
<&style>
<&head>
HTML 2cript tag
The <script> ta' is used to define a client/side script0 such as a Ea(a+cript"
Eample:
<head>
<script type67te#t&:a(ascript7 src67style":s7>
<&head>
"22
CSS (Cascading Style Sheets) is used to style HTM elements"
C++ can $e added to HTM in the follo%in' %ays8
9nline / usin' the style attri$ute in HTM elements
9nternal / usin' the <style> element in the <head> section
E#ternal / usin' an e#ternal C++ file
"22 1nline 2tyle %roperties
The inline styles0 use the style attri$ute in the rele(ant ta'"
Property Description
Fac3'round/color $ac3'round/color property defines the $ac3'round color for an
element8
Gont 0si=e H color font/family0 color0 and font/si=e properties defines the font0 color0
and si=e of the te#t in an element
Te#t/ali'n te#t/ali'n property specifies the hori=ontal ali'nment of te#t in
an element
Eample:
<p style67color8$lueCmar'in/left841p#C7>This is a para'raph"<&p>
1nternal 2tyle 2+eet
The 9nternal styles are defined in the <head> section of an HTM pa'e0 $y usin' the
<style> ta'
Eample:
<head>
<style>
$ody B$ac3'round/color8yello%CD
p Bcolor8$lueCD
< &style>
<&head>
Eternal 2tyle 2+eet
The lin3 to the style sheet usin' the <lin3> ta'" The <lin3> ta' 'oes inside the <head>
section"
Can chan'e the loo3 of an entire >e$ site $y chan'in' one file"
Eample:
<head>
<lin3 rel67stylesheet7 type67te#t&css7 href67stylesheet"css7>
<&head>
Tables
Ta' Description
<ta$le>< Defines a ta$le
<th>< Defines a header cell in a ta$le
<tr>< Defines a ro% in a ta$le
<td>< Defines a cell in a ta$le
<caption>< Defines a ta$le caption
<col'roup>< +pecifies a 'roup of one or more columns in a ta$le for formattin'
<col>< +pecifies column properties for each column %ithin a <col'roup>
element
<thead>< Iroups the header content in a ta$le
<t$ody>< Iroups the $ody content in a ta$le
<tfoot>< Iroups the footer content in a ta$le
Eample:
<ta$le style67%idth8511p#7>
<tr>
<td>Eill<&td>
<td>+mith<&td>
<td>!1<&td>
<&tr>
<tr>
<td>E(e<&td>
<td>Eac3son<&td>
<td>J;<&td>
<&tr>
<&ta$le>
Table Attributes
Table Border
a $order for the ta$le can $e added usin' the $order attri$ute

Eample:
<ta$le $order67)7><&ta$le>

Or
<style>
ta$le0th0td
B
$order8)p# solid $lac3C
D
<&style>
Table Border3collapse
$orders to collapse into one $order0
Eample:
<style>
ta$le0th0td
B
$order8)p# solid $lac3C
$order/collapse8collapse
D
<&style>
Table "ell padding
Cell paddin' specifies the space $et%een the cell content and its $orders"
Eample:
th0td
B
paddin'8)!p#C
D
Table "ell 2pacing
Cell spacin' specifies the space $et%een the cells"
Eample:
ta$le
B
$order/spacin'8!p#C
D
HTML Lists
HTM lists are ordered 0 unordered and Description ists"
-rdered List
*n ordered list starts %ith the <ol> ta'"
Each list item starts %ith the <li> ta'"
The list items are mar3ed %ith num$ers"
Eample:
<ol>
<li>Coffee<&li>
<li>Mil3<&li>
<&ol>
-utput
) Coffee
4 Mil3
4nordered List
*n unordered list starts %ith the <ul> ta'"
Each list item starts %ith the <li> ta'"
The list items are mar3ed %ith $ullets ,typically small $lac3 circles-"
Eample:
<ul>
<li>Coffee<&li>
<li>Mil3<&li>
<&ul>
-utput
Coffee
Mil3
Description List
description list is a list of terms&names0 %ith a description of each term&name"
The <dl> ta' defines a description list"
The <dl> ta' is used in con:unction %ith <dt> ,defines terms&names- and <dd>
,descri$es each term&name-8
Eample:
<dl>
<dt>Coffee<&dt>
<dd>/ $lac3 hot drin3<&dd>
<&dl>

You might also like