Do you know! what ever you see on a website in your browser is purely html and css. If you are really interested in learning website development using any technology weather it is Asp.Net, Java or Php, the basic thing that you should know is HTML and CSS. More over if you want to develop your own static website with contact us form then this course teaches you the best.
In this course we will start with the concept why we need HTML then we dive into tags river and will cover comments, page information, document structure, links, text markup, lists, forms and images. We take start of css with why and goes for various types of styling techniques in web design and move ahead with various selectors and design a beautiful menu from scratch and finally end with designing and hosting a static web site.
4. 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
7. 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
10. 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).
11. Introduction To Visual Studio
https://www.visualstudio.com/en-us/news/vs2013-community-vs.aspx
Any Version
12. <div id=”myDiv”> Hello </div>
Open Tag Close TagAttribute
Key Value
Content
HTML Element
13. 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.
14. 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”
17. Comments And Page Information
<!-- Comment Text -->
Page information goes into the <head> tag
Mostly used page information tags are
<meta/>
<title>
<link/>
31. 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
33. 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
34. 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>
40. Three Different Approaches
There are three different approaches of inserting a style sheet:
Inline style
Internal style sheet
External style sheet
41. 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.
46. 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
49. 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
50. element Selector
Select all <div> elements and apply the style.
div {
color: red;
text-align: center;
}
<div> The content goes here </div>
53. 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>
55. 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>
56. 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>
63. 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