0
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.
• Wo...
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>M...
• The <!DOCTYPE> declaration must be the very first thing in your
HTML document, before the <html> tag.
• The <!DOCTYPE> d...
<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...
• Metadata is data (information) about data.
• The <meta> tag provides metadata about the HTML document.
Metadata will not...
• Define keywords for search engines:
• Define a description of your web page:
<meta name="keywords" content="HTML, CSS, X...
Keywords
Description
• <p> : Paragraph
• <h1></h1><h2></h2>: Heading
<H1> Hello HTML </h1>
<h2> Hello HTML </H2>
<h3> Hello HTML </h3>
<H4> Hel...
• <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 pag...
<table border=1>
</table>
<caption> This is My Table</caption>
<tr>
<tr>
<tr>
<tr>
<tr>
</tr>
</tr>
<td> Column 1 </td>
</...
<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 Co...
•You can say it DIVISION
•Makes logical division on a page.
•Use <div> instead of <table> to create your
website.
•Syntax:...
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 Mak...
action
autocomplete
autofocus
method
enctype
Specifies where to send form data
When autocomplete is on, the browser
automa...
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=‘En...
<form>
<input type="radio" name=“gender" value="male">Male <br>
<input type="radio" name=“gender" value="female">Female
</...
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="...
<form >
Username: <input type="text" name="user">
<input type="submit" value="Submit Me">
<input type=“reset" value=“Clear...
<form>
<input type='file' name='image'>
<input type='submit' value='Upload Image'>
</form>
<form>
<input type='file' name=...
• Color <input type=‘color’>
• Date <input type=‘date’>
• Email <input type=‘email’>
• Number <input type=‘number’>
• Rang...
Attributes Value Discription
Rows Number Specifies number of rows
Cols Number Specifies number of columns
Maxlength Number...
<form>
<textarea name='feedback' rows='10' cols='40' maxlength='100'>
</textarea>
</form>
<form>
<textarea name='feedback'...
<select name=‘cars’>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Merc...
<select>
<optgroup label="HTML Version">
<option value="4">HTML 4.0</option>
<option value="5">HTML 5</option>
</optgroup>...
Legend
Fieldset
<form>
<fieldset style='width:20%'>
<legend>Personal Information</legend>
Name: <input type="text"><br>
Email: <input type...
• The <label> tag defines a label for an <input> element.
• The <label> element does not render as anything special for th...
<form>
<label for="male">Male</label>
<input type="radio" name=“gender" id="male" value="male“>
<br>
<label for="female">F...
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 {...
How to ?
3. External CSS
<link href=‘extern.css’ rel=‘stylesheet’ type=‘text/css’>
extern.css
H1{ color:red;
font-size:44p...
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
HTML CSS and Web Development
Upcoming SlideShare
Loading in...5
×

HTML CSS and Web Development

530

Published on

Learn HTML and CSS from root to top and be a Web Designer

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
530
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "HTML CSS and Web Development"

  1. 1. Web Designing Web Development SEO • HTML • CSS • JavaScript • jQuery • PHP • JSP
  2. 2. <HTML> Hyper Text Markup Language Hyper Text : A text with a Link
  3. 3. • 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.
  4. 4. HTML CSS JavaScript PHP To Display Information. To Design Information. To Provide User Interaction. To Process Information.
  5. 5. 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>
  6. 6. • 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.
  7. 7. <Head> 1. Title 6.script 5. meta4. Style 3. Base 2. Link
  8. 8. •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>
  9. 9. • 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.
  10. 10. • 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">
  11. 11. Keywords Description
  12. 12. • <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
  13. 13. • <img> Tag • <img> tag have no closing tag. <img src=“D:/Workshop/imgname.jpg” alt = “Learn About HTML”> attribute value
  14. 14. • <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>
  15. 15. <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>
  16. 16. <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
  17. 17. •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
  18. 18. Div 1 <div> 2 <div> 3 <div> 4 <div> 5 <div> 6
  19. 19. • 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.
  20. 20. 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
  21. 21. 1. <input> 2. <textarea> 3. <select> 4. <optgroup> 5. <fieldset> 6. <label> 7. <button>
  22. 22. 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’>
  23. 23. <form> <input type="radio" name=“gender" value="male">Male <br> <input type="radio" name=“gender" value="female">Female </form> output
  24. 24. <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
  25. 25. <form > Username: <input type="text" name="user"> <input type="submit" value="Submit Me"> <input type=“reset" value=“Clear Form"> </form> output
  26. 26. <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>
  27. 27. • 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’>
  28. 28. 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.
  29. 29. <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>
  30. 30. <select name=‘cars’> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>
  31. 31. <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>
  32. 32. Legend Fieldset
  33. 33. <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>
  34. 34. • 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.
  35. 35. <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>
  36. 36. Cascading Style Sheets
  37. 37. 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>
  38. 38. How to ? 3. External CSS <link href=‘extern.css’ rel=‘stylesheet’ type=‘text/css’> extern.css H1{ color:red; font-size:44px; }
  39. 39. Order of Precedence Browser CSS Inline CSS Internal CSS External CSS First Second Third Fourth
  40. 40. Syntax h1 { color:red ; font-size:49px;} Rule 1 Rule 2 Property Value Property Value Selector
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×