Html goodies
18
HTML GOODIES Presented By: Ali Hassan
-
date post
11-Sep-2014 -
Category
Design
-
view
1.021 -
download
2
description
This is basi
Transcript of Html goodies
HTML GOODIES
Presented By: Ali
Hassan
Let’s Discuss The Following
• The HTML Doctype • HTML Meta Tags• HTML Body Tags• HTML Standards Checklist• Web Checklist• W3C Validation• Must for SEO compliant HTML• HTML Best Practices• HTML Importance for Web Developers
The HTML Doctype
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN“ "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
The Doctype is an instruction to the web browser about what version of the markup language the page is written in.
HTML Meta Tags
Tag Name Example(s) Description
CONTENT-TYPE <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=UTF-8">
The HTTP content type may be extended to give the character set. It is recommended to always use this tag and to specify the character set.
CONTENT-LANGUAGE<META HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="en-US,fr">
Declares the primary natural language(s) of the document. May be used by search engines to categorize by language.
AUTHOR <META NAME="AUTHOR" CONTENT="Tex Texin"> The author's name.
CACHE-CONTROL<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
The directive CACHE-CONTROL:NO-CACHE indicates cached information should not be used
The <meta> tag provides metadata about the HTML document, Meta elements are typically used to specify page description, keywords, author of the document, and other metadata.
HTML Meta Tags
Tag Name Example(s) Description
COPYRIGHT <META NAME="COPYRIGHT" CONTENT="© 2004 Tex Texin"> A copyright statement.
DESCRIPTION <META NAME="DESCRIPTION" CONTENT="...summary of web page...">
The text can be used when printing a summary of the document.
KEYWORDS <META NAME="KEYWORDS" CONTENT=“drugs, rock & roll">
The keywords are used by some search engines to index your document in addition to words from the title and document body.
EXPIRES <META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">
The date and time after which the document should be considered expired.
HTML Standard Tags
Tag Description
<!--...--> Defines a comment
<a> Defines an anchor
<area /> Defines an area inside an image-map
<base /> Defines a default address
<div> Defines a section in a document
<h1> to <h6> Defines HTML headings
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<menu> Deprecated. Defines a menu list
<object> Defines an embedded object
<script> Defines a client-side script
Tag Description
<select> Defines a select list
<span> Defines a section
<table> Defines a table
<td> Defines a cell in a table
<tr> Defines a row in a table
<tt> Defines teletype text
<textarea> Defines a multi-line text
<strike> Defines strikethrough text
<p> Defines a paragraph
<hr /> Defines a horizontal line
<select> Defines a select list
The body tag serves as the element containing all the content for the website. Tables, Lists, Forms, Paragraphs, everything must be placed within the body element to be displayed on your site.
Let’s Verify The HTML Document
HTML document can be verified by1. Structure and visualization2. HTML code3. CSS Code4. Structure
HTML Standard Checklist
Structure and Visualization
• Do not use <font> element.
• Move arrangement attributes (align, valign, width, height) to CSS.
• Do not use tables except showing table data. Using tables for visual
formatting is acceptable in complex situations only. Max table nesting can
not be great than 3.
• Move attribute "background" to CSS.
• Design of input fields and buttons must be written as class in CSS.
• Style table must be written as external file and linked using <link>
• All images related to design (not content) move to block with style
{background: transparent url("gif") no-repeat;}
HTML Standard Checklist
HTML Code
• If table cell contains only image with width and height, then don't
use these attributes for cell.
• Use minimum cols and rows for tables.
• All <image> elements must have "width" and "height" attributes.
• All <image> elements, which are not links, don't have "border" attribute.
• All attributes values must be placed in double quotes.
• All tags and attributes names must be in low case.
HTML Standard Checklist
CSS Code
• Unique elements must have "id" attribute, which is used for style.
Repeated elements must use classes.
• Determine background color for <body>
• Split declarations to groups (fonts, tables, text blocks, divs)
• Determine geometrical dimensions in percents or pixels.
• All colors values must be as short as possible and in upper case.
• All tags and attributes names must be in lower case.
• All margins and indents must be defined for all browsers.
• All classes and identifiers must be named logically with one naming
convention.
HTML Standards Checklist
Structure
• Use title, description and keywords in header.
• All elements with closing tags must have it (ideally, use XHTML 1.0
Transitional/Strict).
• Use alt attribute for <image>. If image don't have semantic meaning, alt
must be empty.
• Use comments before main blocks.
• Use standard tags for creating text structure
(<h1>-<h4>, <p>, <ul>, <il>, <li> and so one).
• Vertical and Horizontal menus must be defined using <li>.
• Blocks must be placed in document in the descending order of importance.
Blocks location can be defined using CSS.
Website Checklist
Validation Validate the html Validate the CSS Check the broken links
Flexibility Try varying window size Try varying font size
Speed Access the site via a modem Check the image size specification
Accessibility Test accessibility View in text browser
Browser Independence Try different browsers check printed page Switch javascript off Switch plug-in off Switch image off
Other Checks Check non-reliance on mailto Check no orphan page
W3C Validation
Most Web documents are written using markup language, such as HTML or XHTML, which usually include a machine-readable formal grammar The act of checking a document against these constraints is called validation, and this is what the Markup validator does.
Markup Validators
Common markup validators• Unicorn (W3C unified validator)• Markup Validator (It checks document like HTML)• Link Checker (checks hyperlinks, find broken links)• CSS Validator (validate css stylesheets)• Log validator (improve whole site step by step)• mobileOk checker (check websites mobile friendliness)
The markup validator is free service by W3C that helps to check the validity of web documents.
Must For SEO Compliant HTML
Checklist for SEO compliant HTML document Validity Accessibility Content Behind Form Use CSS Heading Tags Links Images and Alt Tags
HTML Best Practices
Examine Your HTML Code Always Declare a Doctype Use Meaningful Title Tags Use Descriptive Meta Tags Always check your code for cross browser visibility Use Divs to Divide Your Layout into Major Sections Close Your Tags Validate Your Code Never Use Inline Javascript Use Firebug Choose a Great Code Editor
HTML Importance For Web Developers
• Knowing HTML will give you an understanding of how the Web works• CSS determines how a page will look.• Important to understand how JavaScript connects with website• Medium of Appreciation• It’s really not a rocket science• Common Communication• You will be a better asset
WEB DEVELOPER ASP/.NET PHP,
JavaScript, DHTML, Perl, SQL, MYSQL, XML, XSL,
AJAX, C++,C#, C-Objective, Java
WEB DESIGNER Photoshop, Illustrator,
Flash, Firework, Typography, Color,
Theory, Web, Accessibility and
Standards
(X)HTML Dreamweaver
CSS
QUESTIONS
