Anúncio
HTML CSS and Web Development
23 de Apr de 2014•0 gostou•1,776 visualizações
4 gostaram
Seja o primeiro a gostar disto
mostrar mais
visualizações
Vistos totais
0
No Slideshare
0
De incorporações
0
Número de incorporações
0
Baixar para ler offline
Denunciar
Educação
Tecnologia
Design
Learn HTML and CSS from root to top and be a Web Designer
Rahul MishraSeguir
iOS Developer at Triffort Pvt Ltd em Triffort Technologies Pvt LtdAnúncio
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">
- Keywords Description
- • <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 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
- •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
- <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>
- • 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>
- <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>
- Legend 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. • 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>
- 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.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
Anúncio