Download - HTML CSS and Web Development

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.

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>

http://www.google.com/

<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

<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>

<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

Download - HTML CSS and Web Development

Top Related