Embed Size (px)
Citation preview
HTMLHYPERTEXT MARKUP LANGUAGE
Doctype HTML documents start with doctype declaration
Informs browser what version of html the page is written
Common Declarations
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML4
HTML5
HTMLBasic Structure
<!DOCTYPE html><html><head>
<title>Acme Inc.</title></head><body>
Content goes here..</body></html>
Tags Tags are the basic building blocks of HTML document
Every tag should be closed with an ending tag
Example
<p>This is a paragraph</p>
Self-Closing Tags Some tags don’t need a closing tag.
They close itself like <br> or <br />
Some common self-closing tags are: <img>, <meta>, <link>, <br>, <hr>
Heading Tags
<h1>This is biggest heading</h1><h2>This is little smaller</h2><h3>This is a heading</h3><h4>This is a heading</h4><h5>This is a heading</h4><h6>This is smallest heading</h6>
There are 6 levels of heading Browser makes the heading bold and adds blank
lines above and below
Paragraph Tag Paragraph tag structure our text into paragraphs
<p>This is a paragraph</p>
Line Break Tag Line breaks makes the following content to appear
on new line
Arun Varma<br />Business Analyst
Horizontal Rule Tag Inserts horizontal line
<hr />
Text Formatting Tags Used to make text bold, underline or italic
<b>Bold</b> <u>Underline</u> <i>Italic</i>
A Tag
<a href=“blog.html”>Read Our Blog</a>
Used to link to other page/website The url to navigate is specified in the href attribute
IMG Tag Can be used to insert images into document The image location is specified in the src attribute
<img src=“fishing.jpg” />
Lists
Unordered lists (ul) are prefixed by circle shape The list items are specified inside <li></li> tags
<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul>
Tables
There are two types of list tags: ul and ol Ordered lists (ol) are prefixed by numbers
Used to display tabular data Splitted into rows (<tr>) and columns (<td>) Table heading is specified inside <th></th> tags
which itself wrapped in <tr></tr> and <thead></thead> tags. Headings are optional.
<table><thead><tr>
<th>ID</th><th>Name</th><th>Role</th>
</tr></thead><tbody><tr>
<td>1</td><td>Sundeep</td><td>Network Admin</td>
</tr>
Table content is specified inside <td></td> which itself wrapped in <tr></tr> and <tbody></tbody> tags
<tr><td>2</td><td>Ravi</td><td>Systems Architect</td>
</tr></tbody></table>
Meta tags are used to add extra information to html document
Typically used to define keywords and description of the site, which is helpful for SEO
META Tag
<meta name=“keywords” content=“mobiles, smartphones, mobile service, mobile sales”>
<style>.logo {width: 20px;}</style>
Javascript can be written inside script tags Script tag can also be used to link external js files
Script Tag
<script type=“text/javascript”>function myFunction {alert();}</script><script src=“moment.js></script>
<meta name=“description” content=“One stop shop for your mobile needs”>
Link Tag External resource files can be linked using LINK tag Commonly used to link external stylesheets and
favicon image
<link href=“style.css” ' rel=“stylesheet” type=“text/css”><link rel="shortcut icon" href=“favicon.ico”>
Style Tag Used to write CSS definitions within HTML
document
Content Grouping Several tag elements can be wrapped inside div tags
to easier management and customization using CSS
<div><b>My Awesome Book</b><div>
Small Tag Reduces the font size
<small>This text appears smaller</small>
Code Tag Formats the text as code block
<code>This is some code</code>
Audio TagHTML5
The HTML5 <audio> element specifies a standard way to embed audio in a web page.
<audio> <source src="horse.mp3" type="audio/mpeg"></audio>
Video TagHTML5
The <video> tag specifies video, such as a movie clip or other video streams.
Semantic Tags
A semantic element clearly describes its meaning to both the browser and the developer.
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag.</video>
• <article>• <aside>• <details>• <figcaption>• <figure>• <footer>• <header>• <main>• <mark>• <nav>• <section>• <summary>• <time>
Attributes Attributes add extra properties to tags
An attribute have a name and a value
<img src=“logo.png” />
Atrribute name Atrribute value
Classes and ids are used to reference the element in css and javascript
Multiple classes separated by space An element can have only one id
width & height attributes
<div class=“row img20”>Content here</div><div id=“myelement”>Content here</div>
align attribute
<h1 title=“HTML Reference by Scott Adams”>HTML Reference</h1>
Defines mouse popover text of an element
<p align=“center”>This text is center aligned</p>
title attribute
bgcolor attribute
<body bgcolor=“red”>Content goes here..</body>
<img src=“meow.jpg” width=“200” height=“100” />
Specifies width and height in pixels for images and tables
class & id attributes
target attribute
<a href=“contactus.html” target=“_blank”>Contact Us</a>
Target attribute in <a></a> tags define the location where the linked document is opened.
For example target=“_blank” opens the link in a new tab
colspan & rowspan attributes
<td colspan=“2”>This text spans two columns</td>
In tables, colspan and rowspan merges the defined number of columns or rows respectively
Used commonky when single cell does not fit the content
HTML Forms HTML Forms are required when you want to collect some data from the site visitor. For example during user registration you would like to collect information such as name, email address, credit card, etc.
A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc. The back-end application will perform required processing on the passed data based on defined business logic inside the application.
Form Tag
Form tag encloses all the fields to submit to server
The action attributes specified where to send the data.
The method attribute specifies how to send the data. Typically it is POST or GET.
<form action=“savecontact.php” method=“post”> .. Form elements here ... </form>
Form Elements
The input tag is the most common form element
It’s type attribute defines what kind of input to get from user
<input type=“text” name=“fullname” />
<input type=“password” name=“password” />
<input type="checkbox" name="maths" value="on"> Maths<input type="checkbox" name="physics" value="on"> Physics
<input type="radio" name="subject" value="maths"> Maths<input type="radio" name="subject" value="physics"> Physics
name attribute
It is the name by which data is sent to the server
For example, in a login form, password is sent with the name “password” and user name is sent with the name “username”
value attribute value attribute defines the default value for a field
The value can be changed by user
Hidden input Hidden input does not display to the user
It is used to send additional information to the server without the user knowing, for example, the visitors location, browser, etc.
<input type=“hidden” name=“location” value=“US” />
Labels Label tag guide the user what to fill in the input
The for attribute of label and id attribute of input must be same
<label for=“name”>Enter Full Name:</label><input type=“text” id=“name” />
Placeholder The placeholder attribute provides a short hint of the expected value
It is also useful if there is no <label> tag
<input type=“text” name=“email” placeholder=“[email protected]” />
Submit Button After filling up the form, the user submits the form using this button
There should be only one submit button in a form. There can be other normal buttons
Submit button is defined by the attribute type=“submit”
<button type=“submit”>Send Message</button>
HTML Entities Non Breaking space Normally, the browser can break a paragraph anywhere there is a space. If you don’t want to break a phrase anytime, use a non-breaking space nbsp;
<p> Einstein wrote Theorynbsp;ofnbsp;Relativity</p>
Here, the phrase Theory of Relativity will appear in one line anytime
There are several other html entities for special characters as well.
© - Copyright Symbol
• - Bullet symbol
View more html entities here: http://www.w3schools.com/html/html_entities.asp
Importing AssetsABSOLUTE PATH
Absolute path is specifying full location of an asset
In web, absolute path is rarely used.
RELATIVE PATH
In web design, assets are imported using relative location between html document and the asset
For example, if the .html is in www folder and .jpg is in www/img folder then, the image is imported as
Windows
C:\www\bg.jpg
Linux
/usr/share/local/www/bg.jpg
<img src=“img/bg.jpg” />
Best Practices
Add utf-8 character encoding meta to support international languages
<head><meta charset=“utf-8” />…</head>
Indent your document for readability
<table><tr>
<td>2013-2014</td></tr><tr>
<td>2014-2015</td></tr>
</table>
Avoid using unnecessary spaces Specify alt attribute to images, incase the image doesn’t load, it provides a hint for the user.
Always close the tag Keep tag names lowercase Do not abuse heading tags. In a blog, the post title can be the only h1 tag Use a good code editor such as Sublime Text or Brackets Use comments to split-test parts of code, but remove them once the website is ready.
<img src=“meeting.jpg” alt=“July press meet, Hanshi Corp” />
<!—<b>Typography</b>-->
Do not use tables for layout purposes
Image Handling
Keep the image’s resolution as close to the placement. For example, do not place a 1000x500px image in a 200x100px placement. Resize the image first.
Reduce the raw size of the image as much as you can without affecting visual quality. You can use either software tools like ImageOptim, Photoshop or online services such as tinypng.com
JPGs are generally smaller in size than PNGs JPGs do not support transparency. Use PNG. Do not change the aspect ratio, it results in stretched or squeezed image For a repeating pattern use smaller images and repeat using CSS. You can get pattern images online like
http://subtlepatterns.com/, http://thepatternlibrary.com/ or create your own seamless pattern Use a quick image editor such as Picasa or Faststone Image Viewer to rapidly do basic tasks such as resize and
cropping Use Photoshop for real-world photograph editing, and CorelDraw or Adobe Illustrator for vector graphic
design
