Scribd
Upload
75 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
75 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
We take content rights seriously. If you suspect this is your content, claim it here.
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