html css and web development
Post on 28-Jan-2015
123 Views
Preview:
DESCRIPTION
TRANSCRIPT
DEVELOPMENT
Web Designing Web Development SEO
• HTML• CSS• JavaScript• jQuery
• PHP• JSP
<HTML>Hyper Text Markup LanguageHyper Text : A text with a Link
Markup Language
• 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.
Why HTML ? Why CSS ? Why JS ? Why PHP ?
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>
Doctype• 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
Base
•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>
Meta•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.
<meta> Tags - Examples of Use• 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">
Keywords
Description
HTML Important Tags
• <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 HTMLHello HTMLHello HTML
Hello HTMLHello HTMLHello HTML
• <img> Tag• <img> tag have no closing tag.
How to Put an Image In Web Page
<img src=“D:/Workshop/imgname.jpg” alt = “Learn About HTML”>
attribute value
<a> Tag
• <a> stands for anchor• Specifies a link for a particular text.
Attributes Value/workHref (Hyper reference) Link of page you want to openTarget _blank : open the link in a new tab
_self : defaultFramename : 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
Column 1 Column 2 Column 3
Column 1 Column 2 Column 3
Column 1 Column 2 Column 3
This is My Table
<tr> <td> Column 1 </td>
Caption
<div>
•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
HTML Forms
•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.
Form Attributes
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
Form Elements
1. <input>2. <textarea>3. <select>4. <optgroup>5. <fieldset>6. <label>7. <button>
Exploring <input>
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’>
3. Radio Buttons
<form><input type="radio" name=“gender" value="male">Male <br><input type="radio" name=“gender" value="female">Female</form>
output
4. Checkboxes
<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
5. Submit and Reset Buttons
<form >Username: <input type="text" name="user"><input type="submit" value="Submit Me"><input type=“reset" value=“Clear Form"></form>output
6. File
<form><input type='file' name='image'> <input type='submit' value='Upload Image'></form>
<form><input type='file' name='image‘ multiple> <input type='submit' value='Upload Image'></form>
HTML5 New Input Types
• 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’>
<textarea>
Attributes Value DiscriptionRows Number Specifies number of rowsCols Number Specifies number of columnsMaxlength Number Specifies maximum number of
characters to be input.
Name Any name Specifies the name of textareaReadonly 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>
<select name=‘cars’> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option></select>
<optgroup>
<select> <optgroup label="HTML Version"> <option value="4">HTML 4.0</option> <option value="5">HTML 5</option> </optgroup> <optgroup label="CSS Version"> <option value="1">CSS</option> <option value="3">CSS 3</option> </optgroup></select>
<fieldset>
Legend Fieldset
<fieldset>
<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.
<label>
• 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.
<label>
<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>
{CSS}Cascading Style Sheets
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.cssH1{ 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
top related