HTML and CSS Fundamentals

[WEB TECHNOLOGIES4CSE1
]

Unit 1
HYPERTEXT MARKUP LANGUAGE (HTML)

HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core
technologies for building Web pages. HTML provides the structur of the page, CSS the (visual and aural)
e
layout, for a variety of devices. Along with graphics and scripting, HTML and CSS are the basis of building
Web pages and Web Applications.

What is HTML?

HTML is the language for describing the structure of Web pages. It is a special kind of text document that
is used by Web browsers to present text and graphics. The text includes markup tags such as <p> to
indicate the start of a paragraph, and </p> to indicate the end of a paragraph. HTML documents are often
referred to as "Web pages". The browser retriev es Web pages from Web servers. HTML gives authors the
means to:

Publish online documents with headings, text, tables, lists, photos, etc.
Retrieve online information via hypertext links, at the click of a button.
Design forms for conducting transactions with remote services, for use in searching for
information, making reservations, ordering products, etc.
Include spread-sheets, video clips, sound clips, and other applications directly in their documents.

With HTML, authors describe the structure of pages using markup. The elements of the language label
pieces of content such as “paragraph,” “list,” “table,” and so on If the file extension is ".html" or ".htm"
then the browser will recognize it as HTML.

What is XHTML?

XHTML is a variant of HTML that uses the syntax of XML, the Extensible Markup Language. XHTML has all
the same elements (for paragraphs, etc.) as the HTML variant, but the syntax is slightly different. Because
XHTML is an XML application, you can use other XML tools with it (such as XSLT, a language for
transforming XML content).

Main HTML elements:

1. DOCTYPE
Tag : <!DOCTYPE ...>
Use this tag if you want to use an SGML/HTML validator. Otherwise, this tag is of little use. The
<!DOCTYPE ...> declaration (technically it's not a "tag") should be the v ery first thing in your
document... if you choose to use it at all. <!DOCTYPE ...> tells the browser what version of HTML
you are writing in. More specifically, <!DOCTYPE ...> declares that this document conforms to a
specific version of HTML, and specifies what version that is.

Y.Lakshmi, Assistant Professor, Department of Computer Science and Engineering, VNR VJIET 1

]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN" >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">

2. Comments
Tag: 






 will even "comment out" other tags. Everything is commented out until the closing -->


<IMG SRC="pumpkin.gif" ALT="pumpkin">

3. HTML– every HTML document should have a enclosing HTML element, a HEAD (TITLE required)
and a BODY
Tag: <HTML>
Put <HTML> at the beginning and end of your document. Everything in the document goes inside
<HTML>, except that <!DOCTYPE ...> (if you choose to use it) goes just before <HTML>.
<HTML>
<HEAD> <TITLE>My Home Page</TITLE> </HEAD>
<BODY> <H1>My Home Page</H1> Hi There! </BODY>
</HTML>

4. HEAD
Within <HTML>, the document has two sections to it: <HEAD> and <BODY ...>. <HEAD> is like the
cover page of the document. Just as the cover page of a book contains information about the
book (such as the title), the <HEAD> section contains information about the document. This
information is communicated through the <TITLE> tag (which is required) and the <LINK ...> and
<META ...> tags.
a. Title
b. Optional
i. BASE – hides the current address and pretends to be the one specified in the
base tag
ii. META – description of the page where name and content are to be specified
iii. BGSOUND – embeds a background sound
iv. SCRIPT, NOSCRIPT – to implement script
v. STYLE – to implement styles
vi. LINK – for linking the external style sheets

]

<HEAD>
<TITLE> sample </TITLE>
<BASE HREF="http://www.webmasterworld.com/forum30/34004.htm">
<META NAME =" sample " CONTENT="sample html code">
<EMBED SRC="D:HTMLsamplelight.MP3">
<LINK REL="stylesheet" HREF="D: HTMLsamplek.css" TYPE="text/css">
<STYLE>
H1
{ color:green;
border: thin groove;
text-align: center;
}
</STYLE>
</HEAD>

5. BODY
a. HTML attributes and attribute values
i. BACKGROUND – back ground picture
ii. BGCOLOR – background color
iii. TEXT – text color
iv. LINK, VLINK, ALINK – link, visited link, active link colors
v. Onload, OnUnload, OnFocus, OnBlur – events

<BODY BACKGROUND="D: HTMLsample NATURE.JPG" BGCOLOR="PINK" TEXT="RED"
LINK="BLUE" ALINK="YELLOW" VLINK="GREEN" class="k">
- - ----
- - ----

</BODY>

Block-Level Elements:

1. Headings
a. H1 H6 – 6 different headers
b. Align – left, right, center, justify
<H1 ALIGN=”center”> hallo </H1>
<H2> hallo </H2>
<H3> hallo </H3>
<H4> hallo </H4>
<H5> hallo </H5>
<H6> hallo </H6>

2. Basic Text Sections
a. P – indicates the beginning of a new paragraph
b. ALIGN – left, right, center, justify
c. PRE -- "preformatted" -- all the spaces and carriage returns are rendered exactly as typed
d. ADDRESS -- denotes contact information for the author or organization of the web site


]

<P ALIGN="right"> HTML is the language for describing the structure of Web pages. It is a
special kind of text document that is used by Web browsers to present text and graphics
<PRE>
A
AA
ABA
</PRE>
<ADDRESS> US Geological Survey, California, United States of America </ADDRESS>

3. Lists
a. OL – ordered list. Bullets type can be specified a, I, i, 1 etc
b. LI – list item

<OL TYPE="a">
<LI>one</LI>
<LI>two</LI>
<LI>three</LI>
</OL>

c. UL – unordered list. Bullets type can be specified square, circle etc
d. LI – list item
<UL TYPE="square">
<LI>tin</LI>
<LI>tun</LI>
<LI>twin</LI>
</UL>

e. DL – data list
f. DT – data term
g. DD – data definition
<DL>
<DT> vampire <DD> beautiful
<DT> dragon <DD> awesome
</DL>

4. Tables and Forms
a. Table Element Attributes:
i. ALIGN – values are LEFT (default), RIGHT, CENTER
ii. BORDER – width in pixels of the border around the table. Default value 0 (visible
3D divider between cells being turned off)
iii. CELLSPACING – gives space in pixels between adjacent cells (0 – 3D line if
BORDER is nonzero, otherwise empty space in the background color is used).
Default value is 3
iv. CELLPADDING – determines the empty space in pixels, between the cell’s border
and the table element. Default value 1
v. WIDTH – specifies the width of the table wither in pixels or as a percentage of
the current browser window width
vi. BGCOLOR – specifies the background color of the table


]

vii. BORDERCOLOR – border color
viii. BACKGROUND – an image can be tiled as the background of the table
b. Table CAPTION
i. Attribute
1. ALIGN – Values TOP, BOTTOM
c. Table ROW
i. TR – used to define each row in the table
ii. Every row in turn contains TH or TD entries
iii. ALIGN – used to set default horizontal alignment for table cells. Values LEFT,
RIGHT, CENTER
iv. VALIGN – used to set default vertical alignment for table cells. Values TOP,
MIDDLE, BOTTOM
v. BGCOLOR – sets the color of the table row. Overrides any value set for the whole
table
vi. BORDERCOLOR
d. Table Cells – TH and TD
i. ROWSPAN – defines the heading or cell data entry that spans multiple rows.
Similar to COLSPAN
ii. ALIGN – LEFT, RIGHT, CENTER, JUSTIFY, and CHAR
iii. VALIGN – TOP, BOTTOM, MIDDLE
iv. WIDTH, HEIGHT – values in pixels only (no percentages allowed)
v. BGCOLOR, BACKGROUND
<TABLE ALIGN="right" BODER="4" CELLSPACING="2" CELLPADDING="2" WIDTH="50%" HEIGHT="50%"
BGCOLOR="magenta" BORDERCOLOR="red" BACKGROUND="D:HTMLsample1.JPG">
<THEAD> Indian Cabinet</ THEAD >
<CAPTION ALIGN="bottom"> Table 3 Portfolio’s and Ministers </CAPTION>

<TH> Portfolio </th> <th> Minister </TH>
----
<TR> <TD>Ministry of Defence</TD> <TD>General A.K.Antony </TD> </TR>
<TR> <TD>Ministry of Law and Order</TD> <TD> Veerappa Moili </TD> </TR>
-----
<TFOOT><TR> <TD COLSPAN=2 ALIGN= center>As on 10-07-2010</TD></TR></TFOOT>
</TABLE>

5. Others
a. BR (explicit line break)
b. HR – horizontal rule
i. NOSHADE – removes the shading effect of the line
ii. ALIGN – left, right, center
iii. WIDTH – in percentage
iv. SIZE – size of the line

HR LIGN= “center” WIDTH=”30%” SIZE=100 NOSH DE


]

c. DIV – defines a block of content in the page

<DIV STYLE="color:white; FONT-FAMILY:arial; FONT-WEIGHT:bold; FONT-STYLE:italic" >
HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices
</DIV>

d. CENTER – indicates a section that is centered

<CENTER>
Hi There! Let's talk about stuff!
</CENTER>

Text-Level Elements:

1. Physical Character Styles
a. B – bold
b. I – italic
c. U – underline
d. SUB — subscript
e. SUP – superscript
f. SMALL – makes text small
g. BIG— makes text big
h. STRIKE/S— strike out
i. FONT – paired tag
i. SIZE – size of the font
ii. COLOR – color of the font
iii. FACE – typestyle for the font
2. Logical Character Styles
a. EM – emphasize
b. STRONG— makes the text stronger than the surrounding text
c. CODE— indicates the text is a program code
d. SAMP—indicates that the text is an example of something
e. DFN— indicates the definition of a word/term
f. VAR— indicates a variable from a computer program
g. CITE— indicates reference to work
I <B> really </B>like this idea.
The law does not <I> se </I>require that action.
per
My favorite book is <U> Kill a Mockingbird </U>
To
When I visited W <SUP>3</SUP>C, I stopped by the H <SUB>2</SUB>O fountain.
HEY, <SMALL>SMALL</SMALL>WORLD.
This is a really <BIG> </BIG>idea!
big
I <B>really </B>like this idea.
The law does not <I> se </I>require that action.
per
My favorite book is <U> Kill a Mockingbird </U>
To


]

When I visited W <SUP>3</SUP>C, I stopped by the H <SUB>2</SUB>O fountain.
HEY, <SMALL>SMALL</SMALL>WORLD.
This is a really <BIG>big </BIG>idea!
I love <S>INDIA</S>
The witness was <EM>not even there </EM> at the time.
I <STRONG>highly recommend </STRONG>Butch for the job.
<CODE>
# open the listing file<BR> unless ( open(MYDATA, "data.txt") )<BR> {die "couldn't open data filen"}
</CODE>
If the file starts with <SAMP>nph- </SAMP> then the web server passes all output straight to the socket.
A <DFN>spud </DFN>is potato.
The variable <VAR>m_head </VAR>stores the entire header string.
Sources:
<UL>
<LI><CITE>Report on Space Management </CITE>, Butch Saul, 1997
<LI><CITE>Consumer Perceptions </CITE>, Ben Hall, 1963
</UL>

3. Hypertext Links
a. A

HREF: URL you are linking to onClick: script to run when the user
NAME: name a section of the clicks on this anchor
page onMouseOver: when the mouse is
TARGET: which window the over the link
document should go in onMouseOut: when the mouse is no
TITLE: suggested title for the longer over the link
document to be opened ACCESSKE
Y

<A ...> is the cornerstone of HTML, the tag that makes hypertext hypertext. <A ...> is the
tag you use to make hyperlinks: the text that you can click on in your web browser to go
to another web page.

< A HREF=" mywebpage.html" >My Web Page</A> produces My Web Page

4. Images
a. IMG
i. SRC (required) – path of the image
ii. ALT – alternative image [path of the alternative image]
iii. ALIGN—left, right, center
iv. WIDTH— width of the image
v. HEIGHT— height of the image
vi. HSPACE— horizontal distance between the picture and the text
vii. VSPACE— vertical distance between the picture and the text
viii. BORDER— border around the picture
ix. USEMAP -- ame of the map definition
n


]

b. Image Map: It is a process of creating an image into individual clickable
elements so that user can click at anywhere of the image, and the respective
portion’s html page is going to open
i. MAP – creates an image map
ii. AREA – identifies the individual logical sections on the map
1. SHAPE – defines the shape of the logical section
2. COORDS – specifies the coordinates of the logical section
3. ALT – alternate message for the logical sectioned map
4. HREF – address of the html page
<IMG SRC="D:HTMLsamplenature.jpg" ALT="universe1" HEIGHT=500 WIDTH=500 USEMAP="#mapp">

<MAP NAME="mapp">
<AREA SHAPE="rect" COORDS="0,0,90,90" ALT="Sun" HRE F="http://www.sun.htm" />
< AREA SHAPE ="rect" COORDS ="90,90,120,120" ALT ="Mercury" HREF =" http://www.mercur.htm" />
< AREA SHAPE ="rect" COORDS ="124,124,138,138" ALT ="Venus" HREF =" http://www.venus.htm" />
< AREA SHAPE ="square" COORDS ="140,140,390,390" ALT ="andromeda" HREF ="
http://www.andromeda.htm" />
</MAP>


HTML and CSS Fundamentals

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (6)

Similar to HTML and CSS Fundamentals

Similar to HTML and CSS Fundamentals (20)

Recently uploaded

Recently uploaded (20)

HTML and CSS Fundamentals