SlideShare a Scribd company logo
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
<!-- This is a HTML Comment Which is not
processing on your browser -->
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
<table border=“1”>
<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
<table border=“1”>
<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
HTML + CSS
CSS Syntax
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

More Related Content

What's hot

Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
Knoldus Inc.
 
AJAX Workshop Notes
AJAX Workshop NotesAJAX Workshop Notes
AJAX Workshop Notes
Pamela Fox
 
HTML presentation for beginners
HTML presentation for beginnersHTML presentation for beginners
HTML presentation for beginners
jeroenvdmeer
 
Introduction to WEB HTML, CSS
Introduction to WEB HTML, CSSIntroduction to WEB HTML, CSS
Introduction to WEB HTML, CSS
University of Technology
 
HTML Foundations, pt 2
HTML Foundations, pt 2HTML Foundations, pt 2
HTML Foundations, pt 2
Shawn Calvert
 
HTML & CSS Workshop Notes
HTML & CSS Workshop NotesHTML & CSS Workshop Notes
HTML & CSS Workshop Notes
Pamela Fox
 
JavaScript and jQuery Fundamentals
JavaScript and jQuery FundamentalsJavaScript and jQuery Fundamentals
JavaScript and jQuery FundamentalsBG Java EE Course
 
Web I - 02 - XHTML Introduction
Web I - 02 - XHTML IntroductionWeb I - 02 - XHTML Introduction
Web I - 02 - XHTML Introduction
Randy Connolly
 
PHP HTML CSS Notes
PHP HTML CSS  NotesPHP HTML CSS  Notes
PHP HTML CSS Notes
Tushar Rajput
 
Html training slide
Html training slideHtml training slide
Html training slide
villupuramtraining
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
Dave Kelly
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
Eliran Eliassy
 
Html
HtmlHtml
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
Ajay Khatri
 
Introduction to Html5, css, Javascript and Jquery
Introduction to Html5, css, Javascript and JqueryIntroduction to Html5, css, Javascript and Jquery
Introduction to Html5, css, Javascript and Jquery
valuebound
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
Fahim Abdullah
 
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJSBasic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Deepak Upadhyay
 

What's hot (20)

Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
 
AJAX Workshop Notes
AJAX Workshop NotesAJAX Workshop Notes
AJAX Workshop Notes
 
HTML presentation for beginners
HTML presentation for beginnersHTML presentation for beginners
HTML presentation for beginners
 
Introduction to WEB HTML, CSS
Introduction to WEB HTML, CSSIntroduction to WEB HTML, CSS
Introduction to WEB HTML, CSS
 
Xhtml 2010
Xhtml 2010Xhtml 2010
Xhtml 2010
 
HTML Foundations, pt 2
HTML Foundations, pt 2HTML Foundations, pt 2
HTML Foundations, pt 2
 
HTML & CSS Workshop Notes
HTML & CSS Workshop NotesHTML & CSS Workshop Notes
HTML & CSS Workshop Notes
 
WWW and HTTP
WWW and HTTPWWW and HTTP
WWW and HTTP
 
JavaScript and jQuery Fundamentals
JavaScript and jQuery FundamentalsJavaScript and jQuery Fundamentals
JavaScript and jQuery Fundamentals
 
Web I - 02 - XHTML Introduction
Web I - 02 - XHTML IntroductionWeb I - 02 - XHTML Introduction
Web I - 02 - XHTML Introduction
 
Week 2-intro-html
Week 2-intro-htmlWeek 2-intro-html
Week 2-intro-html
 
PHP HTML CSS Notes
PHP HTML CSS  NotesPHP HTML CSS  Notes
PHP HTML CSS Notes
 
Html training slide
Html training slideHtml training slide
Html training slide
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
 
Html
HtmlHtml
Html
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Introduction to Html5, css, Javascript and Jquery
Introduction to Html5, css, Javascript and JqueryIntroduction to Html5, css, Javascript and Jquery
Introduction to Html5, css, Javascript and Jquery
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
 
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJSBasic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
 

Viewers also liked

DIWE - File handling with PHP
DIWE - File handling with PHPDIWE - File handling with PHP
DIWE - File handling with PHP
Rasan Samarasinghe
 
DIWE - Fundamentals of PHP
DIWE - Fundamentals of PHPDIWE - Fundamentals of PHP
DIWE - Fundamentals of PHP
Rasan Samarasinghe
 
DIWE - Advanced PHP Concepts
DIWE - Advanced PHP ConceptsDIWE - Advanced PHP Concepts
DIWE - Advanced PHP Concepts
Rasan Samarasinghe
 
DIWE - Programming with JavaScript
DIWE - Programming with JavaScriptDIWE - Programming with JavaScript
DIWE - Programming with JavaScript
Rasan Samarasinghe
 
DIWE - Using Extensions and Image Manipulation
DIWE - Using Extensions and Image ManipulationDIWE - Using Extensions and Image Manipulation
DIWE - Using Extensions and Image Manipulation
Rasan Samarasinghe
 
DIWE - Working with MySQL Databases
DIWE - Working with MySQL DatabasesDIWE - Working with MySQL Databases
DIWE - Working with MySQL Databases
Rasan Samarasinghe
 
Basics of html for web development by software outsourcing company india
Basics of html for web development   by software outsourcing company indiaBasics of html for web development   by software outsourcing company india
Basics of html for web development by software outsourcing company india
Jignesh Aakoliya
 
Basic Web Development
Basic Web DevelopmentBasic Web Development
Basic Web Development
Jason Castellano
 
Web Basics
Web Basics Web Basics
Web Basics
Lisa Lindsay
 
Web basics
Web basicsWeb basics
Web basics
Sagar Pudi
 
Ahmad sameer types of computer
Ahmad sameer types of computerAhmad sameer types of computer
Ahmad sameer types of computer
Sameer Nawab
 
Businese research project on mobile shops
Businese research project on mobile shopsBusinese research project on mobile shops
Businese research project on mobile shops
MOHD ARISH
 
Yaazli International Spring Training
Yaazli International Spring Training Yaazli International Spring Training
Yaazli International Spring Training
Arjun Sridhar U R
 
Savr
SavrSavr
Exception handling in java
Exception handling in java Exception handling in java
Exception handling in java
yugandhar vadlamudi
 
For Loops and Variables in Java
For Loops and Variables in JavaFor Loops and Variables in Java
For Loops and Variables in Java
Pokequesthero
 
Non ieee dot net projects list
Non  ieee dot net projects list Non  ieee dot net projects list
Non ieee dot net projects list
Mumbai Academisc
 
Core java online training
Core java online trainingCore java online training
Core java online training
Glory IT Technologies Pvt. Ltd.
 
Yaazli International Web Project Workshop
Yaazli International Web Project WorkshopYaazli International Web Project Workshop
Yaazli International Web Project Workshop
Arjun Sridhar U R
 

Viewers also liked (20)

DIWE - File handling with PHP
DIWE - File handling with PHPDIWE - File handling with PHP
DIWE - File handling with PHP
 
DIWE - Fundamentals of PHP
DIWE - Fundamentals of PHPDIWE - Fundamentals of PHP
DIWE - Fundamentals of PHP
 
DIWE - Advanced PHP Concepts
DIWE - Advanced PHP ConceptsDIWE - Advanced PHP Concepts
DIWE - Advanced PHP Concepts
 
DIWE - Programming with JavaScript
DIWE - Programming with JavaScriptDIWE - Programming with JavaScript
DIWE - Programming with JavaScript
 
DIWE - Using Extensions and Image Manipulation
DIWE - Using Extensions and Image ManipulationDIWE - Using Extensions and Image Manipulation
DIWE - Using Extensions and Image Manipulation
 
DIWE - Working with MySQL Databases
DIWE - Working with MySQL DatabasesDIWE - Working with MySQL Databases
DIWE - Working with MySQL Databases
 
Basics of html for web development by software outsourcing company india
Basics of html for web development   by software outsourcing company indiaBasics of html for web development   by software outsourcing company india
Basics of html for web development by software outsourcing company india
 
Basic Web Development
Basic Web DevelopmentBasic Web Development
Basic Web Development
 
Web basics
Web basicsWeb basics
Web basics
 
Web Basics
Web Basics Web Basics
Web Basics
 
Web basics
Web basicsWeb basics
Web basics
 
Ahmad sameer types of computer
Ahmad sameer types of computerAhmad sameer types of computer
Ahmad sameer types of computer
 
Businese research project on mobile shops
Businese research project on mobile shopsBusinese research project on mobile shops
Businese research project on mobile shops
 
Yaazli International Spring Training
Yaazli International Spring Training Yaazli International Spring Training
Yaazli International Spring Training
 
Savr
SavrSavr
Savr
 
Exception handling in java
Exception handling in java Exception handling in java
Exception handling in java
 
For Loops and Variables in Java
For Loops and Variables in JavaFor Loops and Variables in Java
For Loops and Variables in Java
 
Non ieee dot net projects list
Non  ieee dot net projects list Non  ieee dot net projects list
Non ieee dot net projects list
 
Core java online training
Core java online trainingCore java online training
Core java online training
 
Yaazli International Web Project Workshop
Yaazli International Web Project WorkshopYaazli International Web Project Workshop
Yaazli International Web Project Workshop
 

Similar to DIWE - Coding HTML for Basic Web Designing

HTML Tutorials
HTML TutorialsHTML Tutorials
HTML Tutorials
Arvind Kumar
 
HTML, CSS and XML
HTML, CSS and XMLHTML, CSS and XML
HTML, CSS and XML
Aashish Jain
 
HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web Development
Rahul Mishra
 
Front End Good Practices
Front End Good PracticesFront End Good Practices
Front End Good PracticesHernan Mammana
 
4. html css-java script-basics
4. html css-java script-basics4. html css-java script-basics
4. html css-java script-basics
xu fag
 
4. html css-java script-basics
4. html css-java script-basics4. html css-java script-basics
4. html css-java script-basics
Nikita Garg
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
Aiman Hud
 
4. html css-java script-basics
4. html css-java script-basics4. html css-java script-basics
4. html css-java script-basics
Minea Chem
 
Html
HtmlHtml
Eye catching HTML BASICS tips: Learn easily
Eye catching HTML BASICS tips: Learn easilyEye catching HTML BASICS tips: Learn easily
Eye catching HTML BASICS tips: Learn easily
shabab shihan
 
HTML 4.0
HTML 4.0HTML 4.0
Web technologies part-2
Web technologies part-2Web technologies part-2
Web technologies part-2
Michael Anthony
 
HyperTextMarkupLanguage.ppt
HyperTextMarkupLanguage.pptHyperTextMarkupLanguage.ppt
HyperTextMarkupLanguage.ppt
DrShamikTiwari
 
Razor into the Razor'verse
Razor into the Razor'verseRazor into the Razor'verse
Razor into the Razor'verse
Ed Charbeneau
 
Intodcution to Html
Intodcution to HtmlIntodcution to Html
Intodcution to Html
Taha Malampatti
 
htmlcss.pdf
htmlcss.pdfhtmlcss.pdf
htmlcss.pdf
ElieMambou1
 
Internet and Web Technology (CLASS-3) [HTML & CSS]
Internet and Web Technology (CLASS-3) [HTML & CSS] Internet and Web Technology (CLASS-3) [HTML & CSS]
Internet and Web Technology (CLASS-3) [HTML & CSS]
Ayes Chinmay
 

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

HTML Tutorials
HTML TutorialsHTML Tutorials
HTML Tutorials
 
Day1
Day1Day1
Day1
 
HTML, CSS and XML
HTML, CSS and XMLHTML, CSS and XML
HTML, CSS and XML
 
Vijay it 2 year
Vijay it 2 yearVijay it 2 year
Vijay it 2 year
 
HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web Development
 
Front End Good Practices
Front End Good PracticesFront End Good Practices
Front End Good Practices
 
4. html css-java script-basics
4. html css-java script-basics4. html css-java script-basics
4. html css-java script-basics
 
4. html css-java script-basics
4. html css-java script-basics4. html css-java script-basics
4. html css-java script-basics
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 
4. html css-java script-basics
4. html css-java script-basics4. html css-java script-basics
4. html css-java script-basics
 
Html
HtmlHtml
Html
 
Eye catching HTML BASICS tips: Learn easily
Eye catching HTML BASICS tips: Learn easilyEye catching HTML BASICS tips: Learn easily
Eye catching HTML BASICS tips: Learn easily
 
HTML 4.0
HTML 4.0HTML 4.0
HTML 4.0
 
Web technologies part-2
Web technologies part-2Web technologies part-2
Web technologies part-2
 
HyperTextMarkupLanguage.ppt
HyperTextMarkupLanguage.pptHyperTextMarkupLanguage.ppt
HyperTextMarkupLanguage.ppt
 
Unit 2
Unit 2 Unit 2
Unit 2
 
Razor into the Razor'verse
Razor into the Razor'verseRazor into the Razor'verse
Razor into the Razor'verse
 
Intodcution to Html
Intodcution to HtmlIntodcution to Html
Intodcution to Html
 
htmlcss.pdf
htmlcss.pdfhtmlcss.pdf
htmlcss.pdf
 
Internet and Web Technology (CLASS-3) [HTML & CSS]
Internet and Web Technology (CLASS-3) [HTML & CSS] Internet and Web Technology (CLASS-3) [HTML & CSS]
Internet and Web Technology (CLASS-3) [HTML & CSS]
 

More from Rasan Samarasinghe

Managing the under performance in projects.pptx
Managing the under performance in projects.pptxManaging the under performance in projects.pptx
Managing the under performance in projects.pptx
Rasan Samarasinghe
 
Agile project management with scrum
Agile project management with scrumAgile project management with scrum
Agile project management with scrum
Rasan Samarasinghe
 
Introduction to Agile
Introduction to AgileIntroduction to Agile
Introduction to Agile
Rasan Samarasinghe
 
IT Introduction (en)
IT Introduction (en)IT Introduction (en)
IT Introduction (en)
Rasan Samarasinghe
 
Application of Unified Modelling Language
Application of Unified Modelling LanguageApplication of Unified Modelling Language
Application of Unified Modelling Language
Rasan Samarasinghe
 
Advanced Web Development in PHP - Understanding REST API
Advanced Web Development in PHP - Understanding REST APIAdvanced Web Development in PHP - Understanding REST API
Advanced Web Development in PHP - Understanding REST API
Rasan Samarasinghe
 
Advanced Web Development in PHP - Understanding Project Development Methodolo...
Advanced Web Development in PHP - Understanding Project Development Methodolo...Advanced Web Development in PHP - Understanding Project Development Methodolo...
Advanced Web Development in PHP - Understanding Project Development Methodolo...
Rasan Samarasinghe
 
Advanced Web Development in PHP - Code Versioning and Branching with Git
Advanced Web Development in PHP - Code Versioning and Branching with GitAdvanced Web Development in PHP - Code Versioning and Branching with Git
Advanced Web Development in PHP - Code Versioning and Branching with Git
Rasan Samarasinghe
 
DIWE - Multimedia Technologies
DIWE - Multimedia TechnologiesDIWE - Multimedia Technologies
DIWE - Multimedia Technologies
Rasan Samarasinghe
 
Esoft Metro Campus - Programming with C++
Esoft Metro Campus - Programming with C++Esoft Metro Campus - Programming with C++
Esoft Metro Campus - Programming with C++
Rasan Samarasinghe
 
Esoft Metro Campus - Certificate in c / c++ programming
Esoft Metro Campus - Certificate in c / c++ programmingEsoft Metro Campus - Certificate in c / c++ programming
Esoft Metro Campus - Certificate in c / c++ programming
Rasan Samarasinghe
 
Esoft Metro Campus - Certificate in java basics
Esoft Metro Campus - Certificate in java basicsEsoft Metro Campus - Certificate in java basics
Esoft Metro Campus - Certificate in java basics
Rasan Samarasinghe
 
DISE - Software Testing and Quality Management
DISE - Software Testing and Quality ManagementDISE - Software Testing and Quality Management
DISE - Software Testing and Quality Management
Rasan Samarasinghe
 
DISE - Introduction to Project Management
DISE - Introduction to Project ManagementDISE - Introduction to Project Management
DISE - Introduction to Project Management
Rasan Samarasinghe
 
DISE - Windows Based Application Development in Java
DISE - Windows Based Application Development in JavaDISE - Windows Based Application Development in Java
DISE - Windows Based Application Development in Java
Rasan Samarasinghe
 
DISE - Windows Based Application Development in C#
DISE - Windows Based Application Development in C#DISE - Windows Based Application Development in C#
DISE - Windows Based Application Development in C#
Rasan Samarasinghe
 
DISE - Database Concepts
DISE - Database ConceptsDISE - Database Concepts
DISE - Database Concepts
Rasan Samarasinghe
 
DISE - OOAD Using UML
DISE - OOAD Using UMLDISE - OOAD Using UML
DISE - OOAD Using UML
Rasan Samarasinghe
 
DISE - Programming Concepts
DISE - Programming ConceptsDISE - Programming Concepts
DISE - Programming Concepts
Rasan Samarasinghe
 
DISE - Introduction to Software Engineering
DISE - Introduction to Software EngineeringDISE - Introduction to Software Engineering
DISE - Introduction to Software Engineering
Rasan Samarasinghe
 

More from Rasan Samarasinghe (20)

Managing the under performance in projects.pptx
Managing the under performance in projects.pptxManaging the under performance in projects.pptx
Managing the under performance in projects.pptx
 
Agile project management with scrum
Agile project management with scrumAgile project management with scrum
Agile project management with scrum
 
Introduction to Agile
Introduction to AgileIntroduction to Agile
Introduction to Agile
 
IT Introduction (en)
IT Introduction (en)IT Introduction (en)
IT Introduction (en)
 
Application of Unified Modelling Language
Application of Unified Modelling LanguageApplication of Unified Modelling Language
Application of Unified Modelling Language
 
Advanced Web Development in PHP - Understanding REST API
Advanced Web Development in PHP - Understanding REST APIAdvanced Web Development in PHP - Understanding REST API
Advanced Web Development in PHP - Understanding REST API
 
Advanced Web Development in PHP - Understanding Project Development Methodolo...
Advanced Web Development in PHP - Understanding Project Development Methodolo...Advanced Web Development in PHP - Understanding Project Development Methodolo...
Advanced Web Development in PHP - Understanding Project Development Methodolo...
 
Advanced Web Development in PHP - Code Versioning and Branching with Git
Advanced Web Development in PHP - Code Versioning and Branching with GitAdvanced Web Development in PHP - Code Versioning and Branching with Git
Advanced Web Development in PHP - Code Versioning and Branching with Git
 
DIWE - Multimedia Technologies
DIWE - Multimedia TechnologiesDIWE - Multimedia Technologies
DIWE - Multimedia Technologies
 
Esoft Metro Campus - Programming with C++
Esoft Metro Campus - Programming with C++Esoft Metro Campus - Programming with C++
Esoft Metro Campus - Programming with C++
 
Esoft Metro Campus - Certificate in c / c++ programming
Esoft Metro Campus - Certificate in c / c++ programmingEsoft Metro Campus - Certificate in c / c++ programming
Esoft Metro Campus - Certificate in c / c++ programming
 
Esoft Metro Campus - Certificate in java basics
Esoft Metro Campus - Certificate in java basicsEsoft Metro Campus - Certificate in java basics
Esoft Metro Campus - Certificate in java basics
 
DISE - Software Testing and Quality Management
DISE - Software Testing and Quality ManagementDISE - Software Testing and Quality Management
DISE - Software Testing and Quality Management
 
DISE - Introduction to Project Management
DISE - Introduction to Project ManagementDISE - Introduction to Project Management
DISE - Introduction to Project Management
 
DISE - Windows Based Application Development in Java
DISE - Windows Based Application Development in JavaDISE - Windows Based Application Development in Java
DISE - Windows Based Application Development in Java
 
DISE - Windows Based Application Development in C#
DISE - Windows Based Application Development in C#DISE - Windows Based Application Development in C#
DISE - Windows Based Application Development in C#
 
DISE - Database Concepts
DISE - Database ConceptsDISE - Database Concepts
DISE - Database Concepts
 
DISE - OOAD Using UML
DISE - OOAD Using UMLDISE - OOAD Using UML
DISE - OOAD Using UML
 
DISE - Programming Concepts
DISE - Programming ConceptsDISE - Programming Concepts
DISE - Programming Concepts
 
DISE - Introduction to Software Engineering
DISE - Introduction to Software EngineeringDISE - Introduction to Software Engineering
DISE - Introduction to Software Engineering
 

Recently uploaded

spirit beverages ppt without graphics.pptx
spirit beverages ppt without graphics.pptxspirit beverages ppt without graphics.pptx
spirit beverages ppt without graphics.pptx
Madan Karki
 
Recycled Concrete Aggregate in Construction Part III
Recycled Concrete Aggregate in Construction Part IIIRecycled Concrete Aggregate in Construction Part III
Recycled Concrete Aggregate in Construction Part III
Aditya Rajan Patra
 
Self-Control of Emotions by Slidesgo.pptx
Self-Control of Emotions by Slidesgo.pptxSelf-Control of Emotions by Slidesgo.pptx
Self-Control of Emotions by Slidesgo.pptx
iemerc2024
 
KuberTENes Birthday Bash Guadalajara - K8sGPT first impressions
KuberTENes Birthday Bash Guadalajara - K8sGPT first impressionsKuberTENes Birthday Bash Guadalajara - K8sGPT first impressions
KuberTENes Birthday Bash Guadalajara - K8sGPT first impressions
Victor Morales
 
Exception Handling notes in java exception
Exception Handling notes in java exceptionException Handling notes in java exception
Exception Handling notes in java exception
Ratnakar Mikkili
 
Technical Drawings introduction to drawing of prisms
Technical Drawings introduction to drawing of prismsTechnical Drawings introduction to drawing of prisms
Technical Drawings introduction to drawing of prisms
heavyhaig
 
sieving analysis and results interpretation
sieving analysis and results interpretationsieving analysis and results interpretation
sieving analysis and results interpretation
ssuser36d3051
 
Heap Sort (SS).ppt FOR ENGINEERING GRADUATES, BCA, MCA, MTECH, BSC STUDENTS
Heap Sort (SS).ppt FOR ENGINEERING GRADUATES, BCA, MCA, MTECH, BSC STUDENTSHeap Sort (SS).ppt FOR ENGINEERING GRADUATES, BCA, MCA, MTECH, BSC STUDENTS
Heap Sort (SS).ppt FOR ENGINEERING GRADUATES, BCA, MCA, MTECH, BSC STUDENTS
Soumen Santra
 
原版制作(unimelb毕业证书)墨尔本大学毕业证Offer一模一样
原版制作(unimelb毕业证书)墨尔本大学毕业证Offer一模一样原版制作(unimelb毕业证书)墨尔本大学毕业证Offer一模一样
原版制作(unimelb毕业证书)墨尔本大学毕业证Offer一模一样
obonagu
 
14 Template Contractual Notice - EOT Application
14 Template Contractual Notice - EOT Application14 Template Contractual Notice - EOT Application
14 Template Contractual Notice - EOT Application
SyedAbiiAzazi1
 
RAT: Retrieval Augmented Thoughts Elicit Context-Aware Reasoning in Long-Hori...
RAT: Retrieval Augmented Thoughts Elicit Context-Aware Reasoning in Long-Hori...RAT: Retrieval Augmented Thoughts Elicit Context-Aware Reasoning in Long-Hori...
RAT: Retrieval Augmented Thoughts Elicit Context-Aware Reasoning in Long-Hori...
thanhdowork
 
在线办理(ANU毕业证书)澳洲国立大学毕业证录取通知书一模一样
在线办理(ANU毕业证书)澳洲国立大学毕业证录取通知书一模一样在线办理(ANU毕业证书)澳洲国立大学毕业证录取通知书一模一样
在线办理(ANU毕业证书)澳洲国立大学毕业证录取通知书一模一样
obonagu
 
ACRP 4-09 Risk Assessment Method to Support Modification of Airfield Separat...
ACRP 4-09 Risk Assessment Method to Support Modification of Airfield Separat...ACRP 4-09 Risk Assessment Method to Support Modification of Airfield Separat...
ACRP 4-09 Risk Assessment Method to Support Modification of Airfield Separat...
Mukeshwaran Balu
 
Literature Review Basics and Understanding Reference Management.pptx
Literature Review Basics and Understanding Reference Management.pptxLiterature Review Basics and Understanding Reference Management.pptx
Literature Review Basics and Understanding Reference Management.pptx
Dr Ramhari Poudyal
 
PROJECT FORMAT FOR EVS AMITY UNIVERSITY GWALIOR.ppt
PROJECT FORMAT FOR EVS AMITY UNIVERSITY GWALIOR.pptPROJECT FORMAT FOR EVS AMITY UNIVERSITY GWALIOR.ppt
PROJECT FORMAT FOR EVS AMITY UNIVERSITY GWALIOR.ppt
bhadouriyakaku
 
哪里办理(csu毕业证书)查尔斯特大学毕业证硕士学历原版一模一样
哪里办理(csu毕业证书)查尔斯特大学毕业证硕士学历原版一模一样哪里办理(csu毕业证书)查尔斯特大学毕业证硕士学历原版一模一样
哪里办理(csu毕业证书)查尔斯特大学毕业证硕士学历原版一模一样
insn4465
 
Hierarchical Digital Twin of a Naval Power System
Hierarchical Digital Twin of a Naval Power SystemHierarchical Digital Twin of a Naval Power System
Hierarchical Digital Twin of a Naval Power System
Kerry Sado
 
一比一原版(UMich毕业证)密歇根大学|安娜堡分校毕业证成绩单专业办理
一比一原版(UMich毕业证)密歇根大学|安娜堡分校毕业证成绩单专业办理一比一原版(UMich毕业证)密歇根大学|安娜堡分校毕业证成绩单专业办理
一比一原版(UMich毕业证)密歇根大学|安娜堡分校毕业证成绩单专业办理
zwunae
 
Modelagem de um CSTR com reação endotermica.pdf
Modelagem de um CSTR com reação endotermica.pdfModelagem de um CSTR com reação endotermica.pdf
Modelagem de um CSTR com reação endotermica.pdf
camseq
 
DfMAy 2024 - key insights and contributions
DfMAy 2024 - key insights and contributionsDfMAy 2024 - key insights and contributions
DfMAy 2024 - key insights and contributions
gestioneergodomus
 

Recently uploaded (20)

spirit beverages ppt without graphics.pptx
spirit beverages ppt without graphics.pptxspirit beverages ppt without graphics.pptx
spirit beverages ppt without graphics.pptx
 
Recycled Concrete Aggregate in Construction Part III
Recycled Concrete Aggregate in Construction Part IIIRecycled Concrete Aggregate in Construction Part III
Recycled Concrete Aggregate in Construction Part III
 
Self-Control of Emotions by Slidesgo.pptx
Self-Control of Emotions by Slidesgo.pptxSelf-Control of Emotions by Slidesgo.pptx
Self-Control of Emotions by Slidesgo.pptx
 
KuberTENes Birthday Bash Guadalajara - K8sGPT first impressions
KuberTENes Birthday Bash Guadalajara - K8sGPT first impressionsKuberTENes Birthday Bash Guadalajara - K8sGPT first impressions
KuberTENes Birthday Bash Guadalajara - K8sGPT first impressions
 
Exception Handling notes in java exception
Exception Handling notes in java exceptionException Handling notes in java exception
Exception Handling notes in java exception
 
Technical Drawings introduction to drawing of prisms
Technical Drawings introduction to drawing of prismsTechnical Drawings introduction to drawing of prisms
Technical Drawings introduction to drawing of prisms
 
sieving analysis and results interpretation
sieving analysis and results interpretationsieving analysis and results interpretation
sieving analysis and results interpretation
 
Heap Sort (SS).ppt FOR ENGINEERING GRADUATES, BCA, MCA, MTECH, BSC STUDENTS
Heap Sort (SS).ppt FOR ENGINEERING GRADUATES, BCA, MCA, MTECH, BSC STUDENTSHeap Sort (SS).ppt FOR ENGINEERING GRADUATES, BCA, MCA, MTECH, BSC STUDENTS
Heap Sort (SS).ppt FOR ENGINEERING GRADUATES, BCA, MCA, MTECH, BSC STUDENTS
 
原版制作(unimelb毕业证书)墨尔本大学毕业证Offer一模一样
原版制作(unimelb毕业证书)墨尔本大学毕业证Offer一模一样原版制作(unimelb毕业证书)墨尔本大学毕业证Offer一模一样
原版制作(unimelb毕业证书)墨尔本大学毕业证Offer一模一样
 
14 Template Contractual Notice - EOT Application
14 Template Contractual Notice - EOT Application14 Template Contractual Notice - EOT Application
14 Template Contractual Notice - EOT Application
 
RAT: Retrieval Augmented Thoughts Elicit Context-Aware Reasoning in Long-Hori...
RAT: Retrieval Augmented Thoughts Elicit Context-Aware Reasoning in Long-Hori...RAT: Retrieval Augmented Thoughts Elicit Context-Aware Reasoning in Long-Hori...
RAT: Retrieval Augmented Thoughts Elicit Context-Aware Reasoning in Long-Hori...
 
在线办理(ANU毕业证书)澳洲国立大学毕业证录取通知书一模一样
在线办理(ANU毕业证书)澳洲国立大学毕业证录取通知书一模一样在线办理(ANU毕业证书)澳洲国立大学毕业证录取通知书一模一样
在线办理(ANU毕业证书)澳洲国立大学毕业证录取通知书一模一样
 
ACRP 4-09 Risk Assessment Method to Support Modification of Airfield Separat...
ACRP 4-09 Risk Assessment Method to Support Modification of Airfield Separat...ACRP 4-09 Risk Assessment Method to Support Modification of Airfield Separat...
ACRP 4-09 Risk Assessment Method to Support Modification of Airfield Separat...
 
Literature Review Basics and Understanding Reference Management.pptx
Literature Review Basics and Understanding Reference Management.pptxLiterature Review Basics and Understanding Reference Management.pptx
Literature Review Basics and Understanding Reference Management.pptx
 
PROJECT FORMAT FOR EVS AMITY UNIVERSITY GWALIOR.ppt
PROJECT FORMAT FOR EVS AMITY UNIVERSITY GWALIOR.pptPROJECT FORMAT FOR EVS AMITY UNIVERSITY GWALIOR.ppt
PROJECT FORMAT FOR EVS AMITY UNIVERSITY GWALIOR.ppt
 
哪里办理(csu毕业证书)查尔斯特大学毕业证硕士学历原版一模一样
哪里办理(csu毕业证书)查尔斯特大学毕业证硕士学历原版一模一样哪里办理(csu毕业证书)查尔斯特大学毕业证硕士学历原版一模一样
哪里办理(csu毕业证书)查尔斯特大学毕业证硕士学历原版一模一样
 
Hierarchical Digital Twin of a Naval Power System
Hierarchical Digital Twin of a Naval Power SystemHierarchical Digital Twin of a Naval Power System
Hierarchical Digital Twin of a Naval Power System
 
一比一原版(UMich毕业证)密歇根大学|安娜堡分校毕业证成绩单专业办理
一比一原版(UMich毕业证)密歇根大学|安娜堡分校毕业证成绩单专业办理一比一原版(UMich毕业证)密歇根大学|安娜堡分校毕业证成绩单专业办理
一比一原版(UMich毕业证)密歇根大学|安娜堡分校毕业证成绩单专业办理
 
Modelagem de um CSTR com reação endotermica.pdf
Modelagem de um CSTR com reação endotermica.pdfModelagem de um CSTR com reação endotermica.pdf
Modelagem de um CSTR com reação endotermica.pdf
 
DfMAy 2024 - key insights and contributions
DfMAy 2024 - key insights and contributionsDfMAy 2024 - key insights and contributions
DfMAy 2024 - key insights and contributions
 

DIWE - Coding HTML for Basic Web Designing

Editor's Notes

  1. Introduction to HTML HTML Versions HTML Standards Creating a Simple HTML Document Document Type Declaration Comments in HTML Paragraphs Line Break Headings Text Formatting Font Formatting Images Hyperlinks Page Body Lists Tables Cell Merging in a Table Table Attributes Horizontal Row Iframes HTML Blocks Division Span Audio Video Youtube Videos Forms and Input Introduction to CSS Advantages of Using CSS CSS Syntax CSS Comments How to Insert CSS? CSS ID and Class CSS Backgrounds CSS Text CSS Fonts CSS Links CSS Lists CSS Tables CSS Box Model Grouping and Nesting Selectors CSS Dimension CSS Display - Block and Inline CSS Positioning CSS Float CSS Horizontal Alignment Navigation Menu in CSS
  2. <style> p { color:blue; text-align:center; } .marked { background-color:red; } .marked p { color:white; } </style> <p>This paragraph has blue text, and is center aligned.</p> <div class="marked"> This isn't a paragraph, therefore has no blue text nor alignment. </div> <div class="marked"> <p>p elements inside a "marked" classed element keeps the alignment style, but has a different text color.</p> </div>
  3. div.ex { width:220px; padding:10px; border:5px solid gray; margin:0px; } Border Style / Border Width p.one { border-style:solid; border-width:5px; } Border Color p.one { border-style:solid; border-color:red; } Margin margin:25px 50px 75px 100px; top margin is 25px right margin is 50px bottom margin is 75px left margin is 100px margin:25px; all four margins are 25px Padding padding:25px 50px 75px 100px; top padding is 25px right padding is 50px bottom padding is 75px left padding is 100px padding:25px 50px 75px; top padding is 25px right and left paddings are 50px bottom padding is 75px padding:25px; all four paddings are 25px Example <!DOCTYPE html> <html> <head> <style> div { width: 320px; padding: 10px; border: 5px solid gray; margin: 0; } </style> </head> <body> <h2>Calculate the total width:</h2> <img src="klematis4_big.jpg" width="350" height="263" alt="Klematis"> <div>The picture above is 350px wide. The total width of this element is also 350px.</div> </body> </html>
  4. Note: Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element with display:block is not allowed to have other block elements inside of it.
  5. An element with fixed position is positioned relative to the browser window. A relative positioned element is positioned relative to its normal position. <!DOCTYPE html> <html> <head> <style> h2 { position:absolute; left:100px; top:150px; } </style> </head> <body> <h2>This is a heading with an absolute position</h2> <p>With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.</p> </body> </html>
  6. <!DOCTYPE html> <html> <head> <style> img { float:right; } </style> </head> <body> <p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p> <p> <img src="logocss.gif" width="95" height="84" /> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> </body> </html>
  7. Without clear <html> <head> <style> img{ float:left; } </style> </head> <body> <img src="" height="100" width="100" /><div>This is text. This is text. This is text. This is text. vThis is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. </div> </body> </html> With clear <html> <head> <style> img{ float:left; } div{ clear:both; } </style> </head> <body> <img src="" height="100" width="100" /><div>This is text. This is text. This is text. This is text. vThis is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. </div> </body> </html>
  8. <!DOCTYPE html> <html> <head> <style> .par { background-color:red; height:400px; width:400px; padding: 10%; } .child { background-color:yellow; height:400px; width:400px; } </style> </head> <body> <div class="par"> <div class="child"> </div> </div> </body> </html>