Introduction To HTML PDF Free Download

2y ago

24 Views

1 Downloads

2.75 MB

55 Pages

Report/dmca

Download PDF

Transcription

Introduction toHTMLChapter 3Randy Connolly and Ricardo HoarRandy Connolly and Ricardo HoarFundamentals of Web Development 2017 Pearsonnd Ed.Fundamentals of Web Development2http://www.funwebdev.com

Chapter 31What Is HTML andWhere Did ItCome from?23SemanticMarkup4Structure of HTMLDocuments5Quick Tour ofHTML Elements6HTML5 SemanticStructureElements7SummaryRandy Connolly and Ricardo HoarHTML SyntaxFundamentals of Web Development - 2nd Ed.

What Is HTML and Where Did It Come from?HTML HTML is defined as a markup language. markup is a way to indicate information about the contentthat is distinct from the content HTML has been through many versions and branches, thedetails of which might matter if you ever see old HTMLcode.Randy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

What Is HTML and Where Did It Come from?MarkupRandy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

What Is HTML and Where Did It Come from?XHTML and ValidationRandy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

What Is HTML and Where Did It Come from?HTML 5 Widely implemented in modern browsers The current W3C recommendation for web development Still relatively new and not always taught.Randy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

HTML SyntaxElements and Attributes HTML documents are composed of textual content andHTML elements HTML element encompasses the element name within angle brackets (i.e., the tag) and HTML elements can also contain attributes. the content within the tag.Randy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

HTML SyntaxElements and AttributesAn empty element does not contain any text content;instead, it is an instruction to the browser to do something. In XHTML, empty elements had to be terminated by atrailing slash. In HTML5, the trailing slash in empty elements is optional.Randy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

HTML SyntaxNesting HTML ElementsRandy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

Semantic MarkupFocus on the structure of the document, not the visualAdvantages: Maintainability Performance Accessibility (http://www.w3.org/WAI ) Search Engine OptimizationRandy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

Structure of HTML DocumentsA simple exampleRandy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

Structure of HTML DocumentsDOCTYPEDOCTYPE Short for Document Type Definition tells thebrowser what type of document it is about to process !DOCTYPE html Randy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

Structure of HTML DocumentsA slightly more complex documentRandy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

Structure of HTML DocumentsHead and BodyHTML5 does not require the use of the html , head , and body elements (but most developers continueto use them). html contains all the other HTML elements in thedocument (Item 2 in previous slide) head contains descriptive elements about thedocument, such (title, style sheets, JavaScript filesetc.) (Item 3) body contains content to be displayed by thebrowser (Item 4)Randy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

Structure of HTML DocumentsSome more common elements The meta element (Item 5) declares that the characterencoding for the document is UTF-8. Item 6 specifies an external CSS style sheet file with link that is used with this document. Item 7 references an external JavaScript file using script Randy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

Quick Tour of HTML ElementsA document to walk throughRandy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

Quick Tour of HTML ElementsCSS styles are coming soon, HTML is structuralRandy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

Quick Tour of HTML ElementsHeadings HTML provides six levels of heading(h1 - h6) Headings are also used by the browser tocreate a document outline for the page.Randy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

Quick Tour of HTML ElementsParagraphs and Divisions p tag is a container for text and other HTMLelements div also a container element and is used to createa logical grouping of contentRandy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

Quick Tour of HTML ElementsLinks Links are an essential feature of all web pages Links use the a element (the “a” stands for anchor).Randy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

Quick Tour of HTML ElementsLinksRandy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

Quick Tour of HTML ElementsLinks (continued)Randy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

Quick Tour of HTML ElementsURL Relative ReferencingRelative Link TypeExampleSame directory a href "example.html" Child Directory a href "images/logo.gif" Grandchild/Descendant Directory a href "css/images/background.gif" Parent/AncestorDirectory a href "./about.html" a href "././about.html” Sibling Directory a href "./images/about.html" Root Reference a href "/images/background.gif" Randy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

Quick Tour of HTML ElementsInline Text Elements they do not disrupt the flow a abbr br cite code em mark small span strong time Randy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

Quick Tour of HTML ElementsImagesRandy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

Quick Tour of HTML ElementsCharacter EntitiesThese are special characters for symbols for which there is either no easy way to type them via a keyboard or which have a reserved meaning in HTML (like“ “)EntityDescription Nonbreakable space< > © ™ Randy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

Quick Tour of HTML ElementsLists Unordered Lists ul Ordered Lists ol Description Lists dl Randy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

Quick Tour of HTML ElementsListsRandy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

HTML5 Semantic Structure ElementsRandy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

HTML5 Semantic Structure ElementsHeader and FooterRandy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

HTML5 Semantic Structure ElementsHeader and Footer A header element isintended to usuallycontain the section’sheading (an h1– h6element), but this is notrequired. The header element canalso be used to wrap asection’s table ofcontents, a search form,or any relevant logos.Randy Connolly and Ricardo Hoar header img src "logo.gif" alt "logo" / h1 Fundamentals of WebDevelopment /h1 . /header article header h2 HTML5 Semantic StructureElements /h2 p By em RandyConnolly /em /p /header . /article Fundamentals of Web Development - 2nd Ed.

HTML5 Semantic Structure ElementsNavigation header img src "logo.gif" alt "logo" / h1 Fundamentals of Web Development /h1 nav ul li a href "index.html" Home /a /li li a href "about.html" About Us /a /li li a href "browse.html" Browse /a /li /ul /nav /header Randy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

HTML5 Semantic Structure ElementsMain main is meant to contain the main unique content ofthe document. main provides a semantic replacement for markup suchas div id "main" or div id "main-content" Randy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

HTML5 Semantic Structure ElementsArticles and Sections section is a much broader element, while the article element is to be used for blocks of content thatcould potentially be read or consumed independently of theother content on the pageRandy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

HTML5 Semantic Structure ElementsFigure and Figure CaptionsRandy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

HTML5 Semantic Structure ElementsAsideThe aside element can be used for sidebars, pull quotes,groups of advertising images, or any other grouping ofnonessential elementsRandy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

HTML5 Semantic Structure ElementsDetails and SummaryRandy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

Tools InsightWYSIWYG EditorsRandy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

Tools InsightCode EditorsRandy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

Tools InsightIntegrated Development EnvironmentsRandy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

Tools InsightCloud-Based EnvironmentsRandy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

Tools InsightCode PlaygroundsRandy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

SummaryKey Termsabsolute referencingaccessibilityancestorsbodyCascading Style Sheets(CSS)character entitydescription listsdescendantsdirectorydocument outlineDocument Object ModelDocument TypeDefinitionempty elementRandy Connolly and Ricardo HoarfolderheadHTML attributeHTML validatorsinline HTML elementsmaintainabilitymarkupmarkup languageordered listspathnamepolyfillquirks modeRecommendationsrelative referencingroot elementroot referenceschemassearch engine optimizationsemantic HTMLspecificationsstandards modesyndicationsyntax errorstagsunordered listsUTF-8WHATWGW3CXHTML 1.0 StrictXHTML 1.0 TransitionalFundamentals of Web Development - 2nd Ed.

QuestionsRandy Connolly and Ricardo HoarFundamentals of Web Development - 2nd Ed.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed. HTML5 Semantic Structure Elements Header and Footer A header element is intended to usually contain the section’s heading (an h1–h6 element), but this is not required. The header element can also be u