Html goodies


Published on

This is basi

Published in: Design, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Html goodies

  1. 1. HTML GOODIESPresented By: Ali Hassan
  2. 2. 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
  3. 3. The Doctype is an instruction to the web browser about whatThe HTML Doctype version of the markup language the page is written in.HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN“ "">HTML 4.01 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""">HTML 4.01 Frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "">
  4. 4. The <meta> tag provides metadata about the HTML document,HTML Meta Tags Meta elements are typically used to specify page description, keywords, author of the document, and other metadata.Tag Name Example(s) Description The HTTP content type may be extended to give the <META HTTP-EQUIV="CONTENT-TYPE" character set. It isCONTENT-TYPE CONTENT="text/html; charset=UTF- recommended to always use 8"> this tag and to specify the character set. Declares the primary natural <META HTTP-EQUIV="CONTENT- language(s) of the document.CONTENT-LANGUAGE LANGUAGE" May be used by search CONTENT="en-US,fr"> engines to categorize by language. <META NAME="AUTHOR"AUTHOR The authors name. CONTENT="Tex Texin"> <META HTTP-EQUIV="CACHE- The directive CACHE-CACHE-CONTROL CONTROL" CONTENT="NO-CACHE"> CONTROL:NO-CACHE indicates cached information should not be used
  5. 5. HTML Meta TagsTag Name Example(s) Description <META NAME="COPYRIGHT"COPYRIGHT A copyright statement. CONTENT="&copy; 2004 Tex Texin"> The text can be used when <META NAME="DESCRIPTION"DESCRIPTION printing a summary of the CONTENT="...summary of web page..."> document. The keywords are used by some search engines to index <META NAME="KEYWORDS"KEYWORDS your document in addition to CONTENT=“drugs, rock & roll"> words from the title and document body. The date and time after which <META HTTP-EQUIV="EXPIRES"EXPIRES the document should be CONTENT="Mon, 22 Jul 2002 11:12:01 GMT"> considered expired.
  6. 6. The body tag serves as the element containing all the content forHTML Standard Tags the website. Tables, Lists, Forms, Paragraphs, everything must be placed within the body element to be displayed on your site.Tag Description Tag Description<!--...--> Defines a comment <select> Defines a select list<a> Defines an anchor <span> Defines a section<area /> Defines an area inside an image-map <table> Defines a table<base /> Defines a default address <td> Defines a cell in a table<div> Defines a section in a document <tr> Defines a row in a table<h1> to <h6> Defines HTML headings <tt> Defines teletype text<ul> Defines an unordered list <textarea> Defines a multi-line text<ol> Defines an ordered list <strike> Defines strikethrough text<li> Defines a list item <p> Defines a paragraph<menu> Deprecated. Defines a menu list <hr /> Defines a horizontal line<object> Defines an embedded object <select> Defines a select list<script> Defines a client-side script
  7. 7. Let’s Verify The HTML DocumentHTML document can be verified by1. Structure and visualization2. HTML code3. CSS Code4. Structure
  8. 8. HTML Standard ChecklistStructure 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;}
  9. 9. HTML Standard ChecklistHTML Code• If table cell contains only image with width and height, then dont 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, dont have "border" attribute.• All attributes values must be placed in double quotes.• All tags and attributes names must be in low case.
  10. 10. HTML Standard ChecklistCSS 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.
  11. 11. HTML Standards ChecklistStructure• 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 dont 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.
  12. 12. Website ChecklistValidation Browser Independence Validate the html  Try different browsers Validate the CSS  check printed page Check the broken links  Switch javascript offFlexibility  Switch plug-in off Try varying window size  Switch image off Try varying font size Other ChecksSpeed  Check non-reliance on mailto Access the site via a modem  Check no orphan page Check the image size specificationAccessibility Test accessibility View in text browser
  13. 13. W3C ValidationMost Web documents are written using markuplanguage, such as HTML or XHTML, which usuallyinclude a machine-readable formal grammar Theact of checking a document against theseconstraints is called validation, and this is whatthe Markup validator does.
  14. 14. The markup validator is free service by W3C that helps to checkMarkup Validators the validity of web documents.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)
  15. 15. Must For SEO Compliant HTMLChecklist for SEO compliant HTML document Validity Accessibility Content Behind Form Use CSS Heading Tags Links Images and Alt Tags
  16. 16. HTML Best PracticesExamine 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
  17. 17. 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 WEB DESIGNER ASP/.NET Photoshop, Illustrator, PHP, JavaScript, DHT (X)HTML Flash, Firework, ML, Perl, SQL, MYSQL,Dreamweaver Typography, Color, CSS Theory, Web, XML, XSL, AJAX, C++,C Accessibility and #, C-Objective, Java Standards
  18. 18. QUESTIONS