SlideShare ist ein Scribd-Unternehmen logo
1 von 18
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 Doctype is an instruction to the web browser about what
The 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“ "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 <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 is
CONTENT-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 author's 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
HTML Meta Tags
Tag 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.
The body tag serves as the element containing all the content for
HTML 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
Let’s Verify The HTML Document
HTML document can be verified by
1. Structure and visualization
2. HTML code
3. CSS Code
4. 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                             Browser Independence
 Validate the html                       Try different browsers
 Validate the CSS                        check printed page
 Check the broken links                  Switch javascript off
Flexibility                               Switch plug-in off
 Try varying window size                 Switch image off
 Try varying font size                Other Checks
Speed                                   Check non-reliance on mailto
 Access the site via a modem           Check no orphan page
 Check the image size specification
Accessibility
 Test accessibility
 View in text browser
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.
The markup validator is free service by W3C that helps to check
Markup 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)
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                   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
QUESTIONS

Weitere ähnliche Inhalte

Was ist angesagt? (19)

Great+Seo+Cheatsheet
Great+Seo+CheatsheetGreat+Seo+Cheatsheet
Great+Seo+Cheatsheet
 
Library Project
Library ProjectLibrary Project
Library Project
 
Html tags describe in bangla
Html tags describe in banglaHtml tags describe in bangla
Html tags describe in bangla
 
Css
CssCss
Css
 
Css
CssCss
Css
 
HTML Web design english & sinhala mix note
HTML Web design english & sinhala mix noteHTML Web design english & sinhala mix note
HTML Web design english & sinhala mix note
 
Web Design Assignment 1
Web Design Assignment 1 Web Design Assignment 1
Web Design Assignment 1
 
Sightly - Part 2
Sightly - Part 2Sightly - Part 2
Sightly - Part 2
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
 
Cascading style sheet
Cascading style sheetCascading style sheet
Cascading style sheet
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
 
Css lecture notes
Css lecture notesCss lecture notes
Css lecture notes
 
INTRODUCTION FOR HTML
INTRODUCTION  FOR HTML INTRODUCTION  FOR HTML
INTRODUCTION FOR HTML
 
Pfnp slides
Pfnp slidesPfnp slides
Pfnp slides
 
Introduction to html5
Introduction to html5Introduction to html5
Introduction to html5
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
XML Binding Language 2.0
XML Binding Language 2.0XML Binding Language 2.0
XML Binding Language 2.0
 
HTML and CSS part 2
HTML and CSS part 2HTML and CSS part 2
HTML and CSS part 2
 
CSS notes
CSS notesCSS notes
CSS notes
 

Ähnlich wie Html goodies

Ähnlich wie Html goodies (20)

HTML - LinkedIn
HTML - LinkedInHTML - LinkedIn
HTML - LinkedIn
 
Introduction to XHTML
Introduction to XHTMLIntroduction to XHTML
Introduction to XHTML
 
Web technology
Web technologyWeb technology
Web technology
 
Eye catching HTML BASICS tips: Learn easily
Eye catching HTML BASICS tips: Learn easilyEye catching HTML BASICS tips: Learn easily
Eye catching HTML BASICS tips: Learn easily
 
Web Page Designing
Web Page DesigningWeb Page Designing
Web Page Designing
 
HTML Introduction
HTML IntroductionHTML Introduction
HTML Introduction
 
Html 1
Html 1Html 1
Html 1
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 
Html Workshop
Html WorkshopHtml Workshop
Html Workshop
 
Intr to-html-xhtml-1233508169541646-3
Intr to-html-xhtml-1233508169541646-3Intr to-html-xhtml-1233508169541646-3
Intr to-html-xhtml-1233508169541646-3
 
Html tutorials-infotech aus
Html tutorials-infotech ausHtml tutorials-infotech aus
Html tutorials-infotech aus
 
Intro webtechstc
Intro webtechstcIntro webtechstc
Intro webtechstc
 
Html basics
Html basicsHtml basics
Html basics
 
HTML Foundations, part 1
HTML Foundations, part 1HTML Foundations, part 1
HTML Foundations, part 1
 
Web technologies-course 02.pptx
Web technologies-course 02.pptxWeb technologies-course 02.pptx
Web technologies-course 02.pptx
 
Html-meeting1-1.pptx
Html-meeting1-1.pptxHtml-meeting1-1.pptx
Html-meeting1-1.pptx
 
HTML and CSS Basics
HTML and CSS BasicsHTML and CSS Basics
HTML and CSS Basics
 
HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web Development
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 

Kürzlich hochgeladen

Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Top Rated  Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...Top Rated  Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...Call Girls in Nagpur High Profile
 
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...Delhi Call girls
 
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756dollysharma2066
 
Sweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptxSweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptxbingyichin04
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...
AMBER GRAIN EMBROIDERY | Growing folklore elements |  Root-based materials, w...AMBER GRAIN EMBROIDERY | Growing folklore elements |  Root-based materials, w...
AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...BarusRa
 
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证eeanqy
 
Just Call Vip call girls Nagpur Escorts ☎️8617370543 Starting From 5K to 25K ...
Just Call Vip call girls Nagpur Escorts ☎️8617370543 Starting From 5K to 25K ...Just Call Vip call girls Nagpur Escorts ☎️8617370543 Starting From 5K to 25K ...
Just Call Vip call girls Nagpur Escorts ☎️8617370543 Starting From 5K to 25K ...Nitya salvi
 
WhatsApp Chat: 📞 8617697112 Call Girl Baran is experienced
WhatsApp Chat: 📞 8617697112 Call Girl Baran is experiencedWhatsApp Chat: 📞 8617697112 Call Girl Baran is experienced
WhatsApp Chat: 📞 8617697112 Call Girl Baran is experiencedNitya salvi
 
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...RitikaRoy32
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️Delhi Call girls
 
Hire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
Hire 💕 8617697112 Meerut Call Girls Service Call Girls AgencyHire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
Hire 💕 8617697112 Meerut Call Girls Service Call Girls AgencyNitya salvi
 
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...amitlee9823
 
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
Hingoli ❤CALL GIRL 8617370543 ❤CALL GIRLS IN Hingoli ESCORT SERVICE❤CALL GIRL
Hingoli ❤CALL GIRL 8617370543 ❤CALL GIRLS IN Hingoli ESCORT SERVICE❤CALL GIRLHingoli ❤CALL GIRL 8617370543 ❤CALL GIRLS IN Hingoli ESCORT SERVICE❤CALL GIRL
Hingoli ❤CALL GIRL 8617370543 ❤CALL GIRLS IN Hingoli ESCORT SERVICE❤CALL GIRLNitya salvi
 
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...amitlee9823
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...instagramfab782445
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdftbatkhuu1
 
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...Call Girls in Nagpur High Profile
 
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men 🔝jhansi🔝 Escorts S...
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men  🔝jhansi🔝   Escorts S...➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men  🔝jhansi🔝   Escorts S...
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men 🔝jhansi🔝 Escorts S...amitlee9823
 
8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available
8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available
8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Availabledollysharma2066
 

Kürzlich hochgeladen (20)

Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Top Rated  Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...Top Rated  Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
 
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
 
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
 
Sweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptxSweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptx
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...
AMBER GRAIN EMBROIDERY | Growing folklore elements |  Root-based materials, w...AMBER GRAIN EMBROIDERY | Growing folklore elements |  Root-based materials, w...
AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...
 
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
 
Just Call Vip call girls Nagpur Escorts ☎️8617370543 Starting From 5K to 25K ...
Just Call Vip call girls Nagpur Escorts ☎️8617370543 Starting From 5K to 25K ...Just Call Vip call girls Nagpur Escorts ☎️8617370543 Starting From 5K to 25K ...
Just Call Vip call girls Nagpur Escorts ☎️8617370543 Starting From 5K to 25K ...
 
WhatsApp Chat: 📞 8617697112 Call Girl Baran is experienced
WhatsApp Chat: 📞 8617697112 Call Girl Baran is experiencedWhatsApp Chat: 📞 8617697112 Call Girl Baran is experienced
WhatsApp Chat: 📞 8617697112 Call Girl Baran is experienced
 
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
 
Hire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
Hire 💕 8617697112 Meerut Call Girls Service Call Girls AgencyHire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
Hire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
 
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
 
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
 
Hingoli ❤CALL GIRL 8617370543 ❤CALL GIRLS IN Hingoli ESCORT SERVICE❤CALL GIRL
Hingoli ❤CALL GIRL 8617370543 ❤CALL GIRLS IN Hingoli ESCORT SERVICE❤CALL GIRLHingoli ❤CALL GIRL 8617370543 ❤CALL GIRLS IN Hingoli ESCORT SERVICE❤CALL GIRL
Hingoli ❤CALL GIRL 8617370543 ❤CALL GIRLS IN Hingoli ESCORT SERVICE❤CALL GIRL
 
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
 
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
 
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men 🔝jhansi🔝 Escorts S...
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men  🔝jhansi🔝   Escorts S...➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men  🔝jhansi🔝   Escorts S...
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men 🔝jhansi🔝 Escorts S...
 
8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available
8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available
8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available
 

Html goodies

  • 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. The Doctype is an instruction to the web browser about what The 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“ "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">
  • 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 is CONTENT-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 author's 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. HTML Meta Tags Tag 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. The body tag serves as the element containing all the content for HTML 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. Let’s Verify The HTML Document HTML document can be verified by 1. Structure and visualization 2. HTML code 3. CSS Code 4. Structure
  • 8. 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;}
  • 9. 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.
  • 10. 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.
  • 11. 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.
  • 12. Website Checklist Validation Browser Independence  Validate the html  Try different browsers  Validate the CSS  check printed page  Check the broken links  Switch javascript off Flexibility  Switch plug-in off  Try varying window size  Switch image off  Try varying font size Other Checks Speed  Check non-reliance on mailto  Access the site via a modem  Check no orphan page  Check the image size specification Accessibility  Test accessibility  View in text browser
  • 13. 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.
  • 14. The markup validator is free service by W3C that helps to check Markup 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. 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
  • 16. 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
  • 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