HTML CSS and Web Development

Web Designing Web Development SEO
• HTML
• CSS
• JavaScript
• jQuery
• PHP
• JSP

<HTML>
Hyper Text Markup Language
Hyper Text : A text with a Link

• A Language which is made up of tags.
• Tags: Anything Between <> angular brackets.
• Words which are formed by W3C.
• World Wide Web Consortium.
• A organization which make standard for web.

HTML
CSS
JavaScript
PHP
To Display Information.
To Design Information.
To Provide User Interaction.
To Process Information.

Structure of HTML document
<!DOCTYPE html>
<html><head><title>My Page</title></head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

• The <!DOCTYPE> declaration must be the very first thing in your
HTML document, before the <html> tag.
• The <!DOCTYPE> declaration is not an HTML tag; it is an instruction
to the web browser about what version of HTML the page is written
in.
• The <!DOCTYPE> declaration helps the browser to display a web
page correctly.
• There are many different documents on the web, and a browser can
only display an HTML page 100% correctly if it knows the HTML type
and version used.

<Head>
1. Title
6.script
5. meta4. Style
3. Base
2. Link

•The <base> tag specifies the base URL/target for
all relative URLs in a page:
<head>
<base href="http://www.w3schools.com/images/"
target="_blank">
</head>

• Metadata is data (information) about data.
• The <meta> tag provides metadata about the HTML document.
Metadata will not be displayed on the page, but will be machine
parsable.
• Meta elements are typically used to specify page description,
keywords, author of the document, last modified, and other
metadata.
• The metadata can be used by browsers (how to display content or
reload page), search engines (keywords), or other web services.
• <meta> tags always go inside the <head> element.

• Define keywords for search engines:
• Define a description of your web page:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
<meta name="description" content=“Workshop on Web Development">
• Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">

• <p> : Paragraph
• <h1></h1><h2></h2>: Heading
<H1> Hello HTML </h1>
<h2> Hello HTML </H2>
<h3> Hello HTML </h3>
<H4> Hello HTML </h4>
<h5> Hello HTML </H5>
<h6> Hello HTML </h6>
Hello HTML
Hello HTML
Hello HTML
Hello HTML
Hello HTML
Hello HTML

• <img> Tag
• <img> tag have no closing tag.
<img src=“D:/Workshop/imgname.jpg” alt = “Learn About HTML”>
attribute value

• <a> stands for anchor
• Specifies a link for a particular text.
Attributes Value/work
Href (Hyper reference) Link of page you want to open
Target _blank : open the link in a new tab
_self : default
Framename : opens in specified frame
Download Downloads instead of opening
<a href="/images/myw3schoolsimage.jpg" download> Download ME </a>
<a href=“http://www.google.com” target = “_blank”>Google </a>

<table border=1>
</table>
<caption> This is My Table</caption>
<tr>
<tr>
<tr>
<tr>
<tr>
</tr>
</tr>
<td> Column 1 </td>
</tr>
</tr>
<td> Column 1 </td>
<td> Column 1 </td>
<td> Column 2 </td>
<td> Column 1 </td>
<td> Column 1 </td>
<td> Column 2 </td>
<td> Column 2 </td>
<td> Column 2 </td>
<td> Column 2</td>
<td> Column 3 </td>
<td> Column 3 </td>
<td> Column 3 </td>
<td> Column 3 </td>
<td> Column 3 </td>
<table> Tag
</tr>

<table> Tag
Column 2 Column 3
Column 1 Column 2 Column 3
This is My Table
<tr> <td> Column 1 </td>
Caption

•You can say it DIVISION
•Makes logical division on a page.
•Use <div> instead of <table> to create your
website.
•Syntax: <div> Your Content </div>
•Nothing without proper CSS

Div 1
<div> 2
<div> 3
<div> 4
<div> 5
<div> 6

• Used to submit user data.
•Used to provide user some interaction with the Website.
• Used to take feedback.
•Used to Make user capable of uploading anything.
• Used to collect information and use that information in
another
page.

action
autocomplete
autofocus
method
enctype
Specifies where to send form data
When autocomplete is on, the browser
automatically complete values based on values
that the user has entered before.
specifies that an <input> element should
automatically get focus when the page loads.
defines the HTTP method for sending form-data to the
action URL
specifies how the form-data should be encoded
when submitting it to the server

1. <input>
2. <textarea>
3. <select>
4. <optgroup>
5. <fieldset>
6. <label>
7. <button>

1. Text
<input type=‘text’ name=‘fname’ value=‘My Name’ autocomplete=‘on’>
<input type=‘text’ name=‘fname’ placeholder=‘Enter Your name’>
2. Password
<input type=‘password’ name=‘pass’ placeholder=‘Enter Your Password’>

<form>
<input type="radio" name=“gender" value="male">Male <br>
<input type="radio" name=“gender" value="female">Female
</form>
output

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
output

<form >
Username: <input type="text" name="user">
<input type="submit" value="Submit Me">
<input type=“reset" value=“Clear Form">
</form>
output

• Color <input type=‘color’>
• Date <input type=‘date’>
• Email <input type=‘email’>
• Number <input type=‘number’>
• Range <input type=‘range’ min=‘0’ max=‘100’ value=‘50’>

Attributes Value Discription
Rows Number Specifies number of rows
Cols Number Specifies number of columns
Maxlength Number Specifies maximum number of
characters to be input.
Name Any name Specifies the name of textarea
Readonly No Value If present the text can only be viewed it
cant be modified
Wrap Hard or soft specifies how the text in a text area is to
be wrapped when submitted in a form.

<form>
<textarea name='feedback' rows='10' cols='40' maxlength='100'>
</textarea>
</form>
<form>
<textarea name='feedback' rows='10' cols='40' readonly'>
You can not edit me. Try if u don’t believe.
</textarea>
</form>

<select name=‘cars’>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

<form>
<fieldset style='width:20%'>
<legend>Personal Information</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>

• The <label> tag defines a label for an <input> element.
• The <label> element does not render as anything special for the
user.
• However, it provides a usability improvement for mouse users,
because if the user clicks on the text within the <label> element,
it toggles the control.
• The for attribute of the <label> tag should be equal to the id
attribute of the related element to bind them together.

<form>
<label for="male">Male</label>
<input type="radio" name=“gender" id="male" value="male“>
<br>
<label for="female">Female</label>
<input type="radio" name=“gender" id="female" value="female">
<br>
<input type="submit" value="Submit">
</form>

How to ?
1. Inline CSS
<h1 style=‘color:red;font-size:44px;’>Hey I am Inline CSS </h1>
2. Internal CSS
<Head>
<style>
H1 { color:red ; font-size:44px}
</style>
</head><body>
<h1> Hello I am Internal CSS
</body>

How to ?
3. External CSS
<link href=‘extern.css’ rel=‘stylesheet’ type=‘text/css’>
extern.css
H1{ color:red;
font-size:44px;
}

Order of Precedence
Browser CSS
Inline CSS
Internal CSS
External CSS
First
Second
Third
Fourth

Syntax
h1 { color:red ; font-size:49px;}
Rule 1 Rule 2
Property Value Property Value
Selector

HTML CSS and Web Development

More Related Content

HTML CSS and Web Development