Learn html and css from scratch

Learn HTML & CSS
From Scratch
Mohd Manzoor Ahmed [MCT]
manzoor_trainer manzoorthetrainer.com

Get The Complete
Video Course Here
(https://goo.gl/I5eopR)

What Are We Going To Learn?
Introduction To HTML
Page Structure
Tags
Comments And Page Information
Document Structure
Links
Images
Static Vs Dynamic Pages
Forms
Introduction To CSS
Approaches Of Applying Style
CSS Selectors

Why HTML?
Share information with the world in the form of different pages linked together.

Get The Complete
Video Course Here

What is HTML?
HTML stands for HyperText Markup Language.
It is used to design and develop Web Pages.
Simple
Browser/Platform Independent
Not Case Sensitive
A medium for User Interface

Observation..
Let’s observer a real world any page. Say Google.com

Page Structure
HTML Or Web Page
<!DOCTYPE>

A Demo..
Let us create our first page say MyFirstPage.html.
You can use any text editor to create a web page, say notepad.
Its extension should be either htm or html(popularly used).

Introduction To Visual Studio
https://www.visualstudio.com/en-us/news/vs2013-community-vs.aspx
Any Version

<div id=”myDiv”> Hello </div>
Open Tag Close TagAttribute
Key Value
Content
HTML Element

Everything Is A Tag
The HTML instructions are called Tags. Basically tags are classified into two
categories.
Container Tags :Tags that have starting as well as ending part.
e.g.: <TITLE>Title of the Web Page </TITLE>
Empty Tags : Tags that do not have the closing part.
e.g.: <br>
HTML instructions + text to which the instructions apply is an HTML element.

Attributes
A key value pairs inside the tag which defines the some features of text are called as
Attributes.
Some important attributes of the BODY tag
BGCOLOR = “color” / “#rrggbb”
BGPROPERTIES=”FIXED”
BACKGROUND = “url of the image”
TEXT = “color” / “#rrggbb”

Comments And Page Information

Page information goes into the <head> tag
Mostly used page information tags are
<meta/>
<title>
<link/>

Document Structure
Below are the mostly used tags to structure the content on the body of the page.
<h[1-6]>
<div>
<span>
<p>
<pre>

Demo..
For Document Structure Tags

Text Markup
Tags mostly used to give some different style or look to the text on the body of page.
<strong>
<em>
<code>
<del>
<sub>

Lists
The tags used to list items either in bullet style or numbered style
<ol>
<ul>
<li>

Tables
<table>
<caption>
<thead>
<tbody>
<tfoot>
<col>
<tr>
<th>
<td>
Most of the page layouts are based upon tables or to show some tabular data on web
pages we some time use tables

Images
To display images on web page we use image tag i.e.,
<img>

Links
The link tags are also called as anchor tag <a href=’xxx’></a>
The link tags are used to
Link one page to another page .
To make a section of page as anchor.
One section of page to another section(anchor) of page.
Link to send email board

Static Vs Dynamic Pages
Static Web Page
Same content to any user, anywhere
Requires web development expertise to
update site
Site not as useful for the user
Content can get stagnant
Dynamic Web Page
Content may differ as per the user
request and location
Much more functional website
Much easier to update
New content brings people back to
the site and helps in the search

Forms
Whenever we want to interact with end user basically we need a form.
Forms can be created with the following form tags
<form>
<fieldset>(I love it)
<legend>
<input>
<select>
<option>
<textarea>

Why CSS?
As HTML is mark-up language, I say CSS is a make-up language.
Don’t you want your content look good to the end user

What is CSS?
CSS stands for Cascading Style Sheets.
CSS describes how your web page should look.
For example its layout, color, font, size, etc.,

Three Different Approaches
There are three different approaches of inserting a style sheet:
Inline style
Internal style sheet
External style sheet

InLine
It is used to apply style to a single element.
Eg:
<div id="myDiv" style="color:white; background-color:linen;">
This is my Div.
</div>
Not recommended to use extensively.

Internal
It is used to apply style to a single page.

Demo..
For internal style sheet

External
It is used to apply style to all page of a web site.
External style sheet is a file created using any text editor.
It should have .css as extension
Every page should refer that file using <link> tag
Say my style sheet file name is myStyle.css
The link that I should include in head is

Demo..
For external stylesheet

div.x {
color: red;
text-align: center;
}
Selector
Value
Decoration
Decoration
Style For Div
Class
Style For Div

CSS Selectors
To find an element on the page and map it to the style we use different selectors.
Few of them are as follows
Element
id
class
grouping

element Selector
Select all <div> elements and apply the style.
div {
color: red;
text-align: center;
}
<div> The content goes here </div>

id Selector
Select the element with myDiv as id and apply the style.
#myDiv {
color: red;
text-align: center;
}
<div id=”myDiv”> The content goes here </div>

class Selector
Select the elements with myClass as class and apply the style.
.myClass {
color: red;
text-align: center;
}
<div class=”myclass”> The content goes here </div>
<p class=”myclass”> The content goes here </p>

element.class Selector
Select the all Div elements with myClass as class and apply the style.
Div.myClass {
color: red;
text-align: center;
}
<div id= “div1” class=”myclass”> The content goes here </div>
<div id =”div2” class=”myclass”> The content goes here </div>
<p class=”myclass”> The content goes here </p>

grouping Selector
div {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
div, h2, p {
text-align: center;
color: red;
}

css Selector Traversing
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: black;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
background-color: orange;
}
<ul id="menu">
<li><a href="/html.htm">HTML</a></li>
<li><a href="/css.htm">CSS</a></li>
<li><a href="/js.htm">JavaScript</a></li>
<li><a href="/php.htm">PHP</a></li>
</ul>

Develop A Static Web Site
Step 1: Create all pages (Home, About us, Our Services and Contact Us)
Step 2: Add a list of links to all pages
Step 3: Create a style sheet
Step 4: Apply style to all pages

Define Layout
Header
Left Content
footer

Demo..
For developing static website.

Hosting Web Site On IIS
Check For IIS availability on the OS
Install IIS On Windows7
Host the website

Demo..
For hosting website on iis.

Learn html and css from scratch

Recommended

More Related Content

What's hot (20)

Viewers also liked (19)

Similar to Learn html and css from scratch (20)

More from Mohd Manzoor Ahmed (7)

Recently uploaded (20)

Learn html and css from scratch