DIWE - Coding HTML for Basic Web Designing

Diploma in Web Engineering
Module III: Coding HTML for Basic
Web Designing
Rasan Samarasinghe
ESOFT Computer Studies (pvt) Ltd.
No 68/1, Main Street, Pallegama, Embilipitiya.

Contents
1. Introduction to HTML
2. HTML Versions
3. HTML Standards
4. Creating a Simple HTML Document
5. Document Type Declaration
6. Comments in HTML
7. HTML Attributes
8. Paragraphs
9. Line Break
10. Headings
11. Text Formatting
12. Font Formatting
13. Images
14. Hyperlinks
15. Page Body
16. Lists
17. Tables
18. Cell Merging in a Table
19. Table Attributes
20. Horizontal Rule
21. Iframes
22. HTML Blocks
23. Division
24. Span
25. Audio
26. Video
27. Youtube Videos
28. Forms and Input
29. Introduction to CSS
30. Advantages of Using CSS
31. CSS Syntax
32. CSS Comments
33. How to Insert CSS?
34. CSS Tag, ID and Class Selectors
35. Grouping and Nesting Selectors
36. CSS Backgrounds
37. CSS Text
38. CSS Fonts
39. CSS Links
40. CSS Lists
41. CSS Tables
42. CSS Box Model
43. CSS Dimension
44. CSS Display - Block and Inline
45. CSS Positioning
46. CSS Float
47. CSS Alignment
48. Navigation Menu in CSS

Introduction to HTML
• HTML stands for Hypertext Markup Language.
• HTML is the most widely used language to write Web
Pages.
• HTML is a markup language consisting from HTML tags.

HTML Versions
Version Year
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013

HTML Standards
• When following the Web standards, the development is
simplified and easier to understand another's coding.
• Using Web standards will ensure that all browsers will
display your Web site properly.
• Always validate your pages with a validation service like
http://validator.w3.org

Creating a Simple HTML Document
<html>
<head>
<title>This is document title</title>
</head>
<body>
Document content goes here..
</body>
</html>
Save file as MyPage.htm or / .html

Document Type Declaration
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Comments in HTML

HTML Attributes
HTML attributes specifies additional details
about HTML elements
<student name=“Roshan” age=“23”>
</student>
<student name=“Kushan” age=“22”>
</student>

Paragraphs
<p>This is a paragraph</p>
<p>This is an another paragraph</p>
<p align=“center”>This is a center aligned
paragraph</p>

Line Break
This is line one <br /> this line is goes to the
second line.

Headings
<h1>This is heading one</h1>
<h2>This is heading two</h2>
<h3>This is heading three</h3>
<h4>This is heading four</h4>
<h5>This is heading five</h5>
<h6>This is heading six</h6>

Text Formatting
This is <b>bold</b> text
This is <i>italic</i> text
This is <u>underline</u> text
This is <strike>strike through</strike> text
This is <sup>super script</sup> text
This is <sub>sub script</sub> text
<blockquote>Quoted text</blockquote>
<marquee>marquee text</marquee>

Font Formatting
Font size changed
<font size=“5”>Size 5 font</font>
Font color changed
<font color=“#FF0000”>Red color font</font>
Font style changed
<font face=“Arial”>Arial Style font</font>

Images
Insert image
<img scr=“images/Koala.jpg” />
Set height and width of the image
<img scr=“images/Koala.jpg” height=“75” width=“100” />
Set alt text to be displayed when an image not loaded
<img scr=“images/Koala.jpg” alt=“Koala” />

Hyperlinks
Absolute Hyperlink
<a href=“http://google.lk”>Google</a>
Relative Hyperlink
<a href=“info.htm”>Information</a>
Hyperlink to a specific element
<a href=“info.htm#about”>About Us</a>
Hyperlink open in a new tab
<a href=“http://yahoo.com” target=“_blank” >Yahoo</a>
Hyperlink with title
<a href=“http://google.lk” title=“Go to google.lk” >Google</a>

Page Body
<body bgcolor=“#0000FF”> </body>
<body background=“images/Koala.jpg”>
</body>

Lists
Ordered List
<ol>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ol>
Unordered List
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>

Tables
<table border=“1”>
<tr><th>h1c1</th><th>h1c2</th><th>h1c3</th></tr>
<tr><td>r1c1</td><td>r1c2</td><td>r1c3</td></tr>
<tr><td>r2c1</td><td>r2c2</td><td>r2c3</td></tr>
</table>
h1c1 h1c2 h1c3
r1c1 r1c2 r1c3
r2c1 r2c2 r2c3

Cell Merging in a Table
<tr><td rowspan=“2”> r1c1 </td><td> r1c2
</td><td> r1c3 </td></tr>
<tr><td> r2c2 </td><td> r2c3 </td></tr>
</table>
r1c1 r1c2 r1c3
r2c2 r2c3

Cell Merging in a Table
<tr><td colspan=“2”> r1c1 </td><td> r1c3
</td></tr>
<tr><td> r2c1 </td><td> r2c2 </td><td> r2c3
</td></tr>
</table>
r1c1 r1c3
r2c1 r2c2 r2c3

Table Attributes
Attribute Description
border Line width in pixels around the table
height Table height
width Table width
align Table alignment in container
cellspacing Amount of space between adjacent cells
cellpadding Amount of space between edges of a cell and it’s content
bgcolor Background color of the table
bordercolor Color of the table borders
valign Verticle alignment of the data in cells

Horizontal Rule
<hr>
<hr color=“#FF0000”>

Iframes
An Iframe is used to display a web page within a
web page.
Iframe
<iframe src=“info.htm" name="iframe_a"></iframe>
Open hyperlink in Iframe
<a href="http://wegaspace.com" target="iframe_a”
>Wegaspace</a>

HTML Blocks
Block level elements normally start (and
end) with a new line when displayed.
Examples: <h1>, <p>, <ul>, <table>

HTML Blocks
Inline elements are normally displayed
without starting a new line.
Examples: <b>, <td>, <a>, <img>

Division
<div> element is a block level element that can
be used as a container for grouping other HTML
elements.
<div>content goes here</div>
Another common use of the <div> element is for
creating layout.

Span
The <span> tag is used to group inline element
in a documents
<p>this is a paragraph. <span>This is a sub
section inside it.</span></p>

Audio
Audio - Using <embed>
<embed height="50" width="100" src=“test.mp3">

Audio
Audio - Using <object>
<object height="50" width="100"
data=“test.mp3“ > Your browser does not
support this audio format. </object>

Audio
HTML5 <audio> Element
<audio controls>
<source src=“test.mp3" type="audio/mpeg">
<source src=“test.ogg" type="audio/ogg">
Your browser does not support this audio
format.
</audio>

Video
Video - Using <embed>
<embed src=“test.mp4" height="200"
width="200">

Video
Video - Using <object>
<object data=“test.mp4" height="200"
width="200"> Your browser does not support
the video tag. </object>

Video
HTML5 <video> Element
<video width="320" height="240" controls>
<source src=“test.mp4" type="video/mp4">
<source src=“test.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Youtube Videos
By using Iframe
<iframe width="420" height="345"
src="http://www.youtube.com/embed/XGSy3_C
zz8k">
</iframe>

Youtube Videos
By using embed video
<embed width="420" height="345"
src="http://www.youtube.com/v/XGSy3_Czz8k"
type="application/x-shockwave-flash">
</embed>

Forms and Input
<form name="input" action=“welcome.php" method="get">
Name: <input type="text" name="name"><br/>
Password: <input type=“password" name=“pass"><br/>
<input type="radio" name="sex" value="male">Male<br/>
<input type="radio" name="sex" value="female">Female<br/>
<input type="checkbox" name=“profession" value=“St">I am a
student<br/>
<input type="submit" value="Submit">
</form>

Introduction to CSS
Cascading Style Sheets, shorten as CSS, is a
simple design language that define how to
display HTML elements.

Advantages of Using CSS
 CSS saves time
 Pages load faster
 Easy maintenance
 Superior styles to HTML
 Multiple Device Compatibility
 Global web standards

CSS Comments
Comments are used to explain your code
/*This is a comment*/

How to Insert CSS?
• Inline Style
• Internal Style Sheet
• External Style Sheet

Inline Style
<p style="color:sienna;margin-left:20px;">This is
a paragraph.</p>

Internal Style Sheet
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-
image:url("images/back40.gif");}
</style>
</head>

External Style Sheet
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>

CSS Tag, ID and Class Selectors
The HTML Tag Selector
p {color:green;}
The id Selector
#para1 {color:red;}
The class Selector
.center {text-align:center;}
Class Selector for specific elements
p.center {text-align:center;}

Grouping and Nesting Selectors
Grouping Selectors
h1,h2,p
{
color: green;
}

Grouping and Nesting Selectors
Nesting Selectors
p a
{
color: yellow;
}

CSS Backgrounds
Background Color
body {background-color:#b0c4de;}

CSS Backgrounds
Background Image
body
{
background-image:url('paper.gif');
background-repeat:no-repeat;
background-repeat:repeat-x;
background-size:100%;
}

CSS Text
Text Color
h1 {color:#00ff00;}
Text Alignment
h1 {text-align:center;}

CSS Text
Text Decoration
a {text-decoration:none;}
h3 {text-decoration:underline;}
Text Transformation
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

CSS Fonts
Font Family
p{font-family:"Times New Roman", Times, serif;}

CSS Fonts
Font Style
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

CSS Fonts
Font Weight
p.normal {font-weight:normal;}
p.bold {font-weight:bold;}
p.bolder {font-weight:bolder;}

CSS Fonts
Set Font Size With Pixels
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

CSS Fonts
Set Font Size With Em (16px=1em)
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

CSS Links
Change Link Color on Different States
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */

CSS Links
Change Text Decoration on Different States
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

CSS Links
Change Background Color on Different States
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

CSS Lists
Different List Item Markers
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

CSS Lists
An Image as The List Item Marker
ul { list-style-image: url(‘apple.gif'); }

CSS Tables
Table Borders
table, th, td{border: 1px solid black;}
Collapse Borders
table{border-collapse:collapse;}
Table Width and Height
table{width:100%;}
th{height:50px;}

CSS Tables
Table Text Alignment
td{text-align:right; vertical-align:bottom;}
Table Padding
td{padding:15px;}
Table Color
table, td, th{border:1px solid green;}
th{background-color:green; color:white;}

CSS Box Model
The CSS box model is a box that wraps around HTML
elements.
It allows us to place a border around elements and space
elements in relation to other elements.

CSS Dimension
p.ex
{
height:100px;
width:100px;
}

CSS Display - Block and Inline
li
{
display:inline;
}
span
{
display:block;
}

CSS Positioning
Fixed Positioning
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

CSS Positioning
Relative Positioning
h2.pos_right
{
position:relative;
left:20px;
}

CSS Positioning
Absolute Positioning
h2
{
position:absolute;
left:100px;
top:150px;
}

CSS Float
With CSS float, an element can be pushed to the
left or right, allowing other elements to wrap
around it.
Floating element to the right
img
{
float:right;
}

CSS Float
Turning off Float - Using Clear
.text_line
{
clear:both;
}

CSS Horizontal Alignment
Center Aligning
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

CSS Horizontal Alignment
Left and Right Aligning Using the position Property
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

CSS Vertical Alignment
Middle alignment for a single text line
.container {
background-color: #FF3300;
height:50px;
line-height:50px;
}

CSS Vertical Alignment
Middle alignment for a block element
.parent_container {
background-color: #00FF33;
/*same padding for height and width */
padding:5% 0;
}

Navigation Menu in CSS (Unordered List) cont.
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li { float:left; } /* horizontal menu */

Navigation Menu in CSS (Unordered List)
a:link, a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover, a:active { background-color:#7A991A; }

The End
http://twitter.com/rasansmn

DIWE - Coding HTML for Basic Web Designing

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to DIWE - Coding HTML for Basic Web Designing

Similar to DIWE - Coding HTML for Basic Web Designing (20)

More from Rasan Samarasinghe

More from Rasan Samarasinghe (20)

Recently uploaded

Recently uploaded (20)

DIWE - Coding HTML for Basic Web Designing

Editor's Notes