HTML REVISION SLIDES Introduction HTML stands for Hyper
- Slides: 32
HTML REVISION SLIDES
Introduction HTML stands for Hyper Text Markup Language. It is used to design web pages using markup language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages. Markup language is used to define the text document within tag which defines the structure of web pages. HTML 5 is the fifth and current version of HTML.
Example <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> </head> <body> Content of the document. . . </body> </html>
HTML 5 Semantic Elements Semantic HTML elements clearly describe it’s meaning in a human and machine readable way. Elements such as <header>, <footer> and <article> are all considered semantic because they accurately describe the purpose of the element and the type of content that is inside them.
List of new semantic elements The semantic elements added in HTML 5 are: • <article> • <aside> • <details> • <figcaption> • <figure> • <footer> • <header> • <main> • <mark> • <nav> • <section> • <summary> • <time>
An example of semantic element layout
HTML 5 Block Level Elements HTML block level elements can appear in the body of an HTML page. It can contain another block level as well as inline elements. By default, block-level elements begin on new lines. block level elements create larger structures (than inline elements).
List of block level elements blockquote dl div form pre hr address table p h 1, ol, h 2, h 3, h 4, h 5, h 6 ul
HTML inline elements
List of inline elements b, big, i, small, tt abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var a, bdo, br, img, map, object, q, script, span, sub, sup button, input, label, select, textarea
Basics of Tables HTML tables should only be used for rendering data that naturally belongs in a grid. When you are structuring tables, the HMTL markup is basically structured with row and cells (note, that there are no tags for columns, just rows). The tag for rows is <tr> (abbreviation for table row) and the tag for each cell is <td> (which stands for table data, and this is where the actual content is.
Example <table border="1" width="100%"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> <td>Row 2, cell 3</td> </tr> <td>Row 2, cell 1</td> <td>Row 2, cell 2</td> <td>Row 2, cell 3</td> </tr> <td>Row 3, cell 1</td> <td>Row 3, cell 2</td> <td>Row 3, cell 3</td> </tr> <td>Row 4, cell 1</td> <td>Row 4, cell 2</td> <td>Row 4, cell 3</td> </tr> </table>
Web Forms No doubt you interact with at least one form on the Web every day. Whether you’re searching for content or logging in to your e-mail account or Facebook page, using online forms is one of the most common tasks performed on the Web
Example <form> First name: <input type="text" name="firstname" /> Surname: <input type="text" name="surname" /> <input type="submit" value="Submit now" /> </form>
HTML Input Types • <input • <input type="button"> type="checkbox"> type="color"> type="datetime-local"> type="email"> type="file"> type="hidden"> • <input • <input type="image"> type="month"> type="number"> type="password"> type="radio"> type="range"> type="reset">
HTML Input Types • <input • <input type="search"> type="submit"> type="tel"> type="text"> type="time"> type="url"> type="week">
Input Type Radio <form> <input type="radio" name="gender" value="male" checked> Male <input type="radio" name="gender" value="female"> Female <input type="radio" name="gender" value="other"> Other </form>
Input Type Checkbox <form> <input type="checkbox" name="vehicle 1" value="Bike"> I have a bike <input type="checkbox" name="vehicle 2" value="Car"> I have a car </form>
The <select> Element <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select>
CSS Cascading Style Sheets, fondly referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page.
CSS Syntax A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your document. A style rule set consists of a selector and declaration block.
Example : p{ color: red; text-align: center; }
Three Ways to Insert CSS There are three ways of inserting a style sheet: External CSS Inline CSS
External CSS <!DOCTYPE html> <head> <link rel="stylesheet" type="text/css" href="mystyle. css"> </head> <body> <h 1>This is a heading</h 1> <p>This is a paragraph. </p> </body> </html> "mystyle. css“ file contents body { background-color: lightblue; } h 1 { color: navy; margin-left: 20 px; }
Internal CSS <!DOCTYPE html> <head> <style> body { background-color: linen; } h 1 { color: maroon; margin-left: 40 px; } </style> </head> <body> <h 1>This is a heading</h 1> <p>This is a paragraph. </p> </body> </html>
Inline CSS <!DOCTYPE html> <head> <style> body { background-color: linen; } h 1 { color: maroon; margin-left: 40 px; } </style> </head> <body> <h 1>This is a heading</h 1> <p>This is a paragraph. </p> </body> </html>
CSS Colors <h 1 style="background-color: Dodger. Blue; ">Hello World</h 1> <p style="background-color: Tomato; ">Lorem ipsum. . . </p> <h 1 style="color: Tomato; ">Hello World</h 1> <p style="color: Dodger. Blue; ">Lorem ipsum. . . </p> <p style="color: Medium. Sea. Green; ">Ut wisi enim. . . </p> <h 1 style="border: 2 px solid Tomato; ">Hello World</h 1> <h 1 style="border: 2 px solid Dodger. Blue; ">Hello World</h 1> <h 1 style="border: 2 px solid Violet; ">Hello World</h 1>
CSS Backgrounds div { background-color: lightblue; } p{ background-color: yellow; } body { background-image: url("paper. gif"); }
Best CSS Frameworks Web Developers used to spend a lot of time creating beautiful CSS. Thanks to the CSS frameworks, we now have a better, faster, and more effective way to build responsive websites and web applications.
How do CSS frameworks work? CSS framework gives web developers a basic structure, which includes grid, interactive UI patterns, web typography, tooltips, buttons, form elements, icons. This structure helps web developers to start quickly and efficiently when they are designing a website or web applications. That means developers can free themselves from starting everything from scratch. CSS framework will create a solid foundation for them. Besides, developers can also reuse code in all projects they work on.
What are the best CSS frameworks? 1. Bootstrap - The most widely used free and open-source CSS framework 2. Foundation - The most advanced responsive front-end framework in the world 3. Pure - The lightweight CSS framework 5. Semantic UI - A development framework using human-friendly HTML 6. UI kit - A lightweight and modular front-end framework for creating fast and powerful web interfaces 7. Materialize CSS - A modern responsive front-end framework based on Material Design
Thank You