Basic html structure
11,363 views
26 slides
Apr 04, 2017
Slide 1 of 26
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
About This Presentation
Presents the basic HTML5 structure
Slide Content
Web Development: { Basic HTML Structure } Presented by: Mr. Jhaun Paul G. Enriquez MIS Coordinator
What is HTML? Web Development: Using HTML5 & CSS3 2 describes the structure of Web pages using markup elements are the building blocks of HTML pages File extension must be .html or . htm HTML HTML5 World Wide Web Consortium ( W3C ) Web Hypertext Application Technology Working Group ( WHATWG )
What is HTML? Web Development: Using HTML5 & CSS3 3 Using Markup Tags or Elements: Use keywords or tag names Enclosed within angle brackets ( < > ) Opening Tag Closing Tag < tagname > content </ tagname > < h1 > … </h1> < p > … </p> <a> … </a> < body > … </body> < header > … </header> Examples: < hr > < br > < img > <meta> <input> Empty Tags
HTML Basic Structure: Syntax Web Development: Using HTML5 & CSS3 4 has a " custom " HTML syntax that is compatible with HTML 4 and XHTML1 documents XHTML Rules: Lower case tag names Quoting our attributes An attribute had to have a value Close all empty elements HTML5 Support: Uppercase tag names. Quotes are optional for attributes. Attribute values are optional. Closing empty elements are optional
HTML Basic Structure: Documents Web Development: Using HTML5 & CSS3 5 HTML Web Document XHTML Web Document
HTML Basic Structure: Documents Web Development: Using HTML5 & CSS3 6 HTML5 Web Document
used by the web browser to understand the version of the HTML used in the document Older HTML versions was SGML based and requires a reference to the DTD. HTML Basic Structure: Documents Web Development: Using HTML5 & CSS3 7 DOCTYPE Declaration <!DOCTYPE html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http :// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
Basic Web Document Elements Tags Description <html> root element of an HTML page <head> represents the document's header <title> mention the document title <meta> provides metadata about the HTML document like character encoding , page description , or keywords <body> represents the document’s body and contains the visible page content Web Development: Using HTML5 & CSS3 8
Web Development: Using HTML5 & CSS3 9 Using Block and Inline Elements Block-level - always starts on a new line and takes up the full width available <h1> to <h6>, <p>, <div>, <table> or <form> Inline - does not start on a new line and only takes up as much width as necessary <strong>, < em >, <b>, <i>, <span>, < img > or <a> Nesting Elements on a Web Page <p> This is a <b> paragraph </b> . </p> <p> This is a <b> paragraph. </p> </b>
HTML Basic Structure: Attributes Web Development: Using HTML5 & CSS3 10 provide additional info about HTML elements placed within the opening tag Paired with a " value " Example:
HTML Basic Structure: Guidelines Web Development: Using HTML5 & CSS3 11 All markup tags must be lowercase <p>, <strong>, < em >, < blockquote >, < br >, < hr > All elements must have both an opening and closing tag except for empty or void tags < p> This is a paragraph tag </ p> This is a forced line break < br > All tags must be properly nested <p> <strong> This is a paragraph tag </strong> </p> Attributes can be assigned a value < img src = "school.jpg" alt = "school image" disabled >
Validating Web Documents to take away some of the uncertainty of HTML The most important validator is the W3C validator at https://validator.w3.org
Quick Check: What tag always begins an HTML document? What tags are used to contain data that will not display on the page? Where will the text you type between the <title> tags be displayed in the browser? What would happen if you did not code the end </title> tag properly? What tag serve as a container for all the text and images on a web page? What would you code to make a statement that is not displayed on a web page?
Exercise 1: Creating a Validated Web Page Template Web Development: Using HTML5 & CSS3 14 Create a template for developing web pages using HTML5. Save the HTML document as webtemplate.html in a folder and view using a web browser . Validate the web page template using an W3C’s Markup Validation Service.
Creating and Editing Web Page Web Development: Using HTML5 & CSS3 15 Using Heading Tags: Increase the size of text and measured in points ( pt ) Six heading tags: <h1>, <h2>, <h3>, <h4>, <h5>, <h6> Heading tags make text bold HTML Code Browser Display
Creating and Editing Web Page Web Development: Using HTML5 & CSS3 16 Using Paragraph and Break Tags: Control line endings in an HTML document <p> … </p> - inserts a blank line between text < br > - inserts a line break HTML Code Browser Display
Creating and Editing Web Page Web Development: Using HTML5 & CSS3 17 Using Text Formatting Tags: Logical tags – let the browser determine how to display the text in an HTML document <strong> … </strong> and < em > … </ em > Physical tags – state how text should be displayed <b> … </b> and <i> … </i> HTML Code Browser Display
Creating and Editing Web Page Web Development: Using HTML5 & CSS3 18 Using Text Formatting Tags: <sup > … </sup > - makes text a superscript <sub > … </sub> - makes text a subscript HTML Code Browser Display
Creating and Editing Web Page Web Development: Using HTML5 & CSS3 19 Using Blockquote Tags: Sets enclosed text to appear as a quotation, indented on the right and left < blockquote > … </ blockquote > HTML Code Browser Display
Creating and Editing Web Page Web Development: Using HTML5 & CSS3 20 Using Horizontal Rule: < hr > - used to create lines that are used to visually divide a page into sections HTML Code Browser Display
Creating and Editing Web Page Web Development: Using HTML5 & CSS3 21 Using Preserve F ormatting Tags: <pre> … </pre> - preserve the formatting of the source document the exact way it was written HTML Code Browser Display
Creating and Editing Web Page Web Development: Using HTML5 & CSS3 22 Using Abbreviations and Address: < abbr > … </ abbr > - abbreviation or acronym <address> … </address> - contact information HTML Code Browser Display
Creating and Editing Web Page Web Development: Using HTML5 & CSS3 23 Inserting Reserved Characters: Browser Display Named Entity Reference Character Reference Symbol Displayed Description & lt ; < < Less than & gt ; > > Greater than © © Copyright & nbsp ;   (a space) space & middot ; · Round bullet HTML Code Characters in HTML cannot be created by using a keyboard
Creating and Editing Web Page Web Development: Using HTML5 & CSS3 24 Using Comments Tag: <!–– comment --> - insert comments in HTML Not displayed by the browser HTML Code Browser Display
Deprecated Tags <acronym > <applet > < basefont > <big> < center > < dir > < font > <frame> < frameset> < isindex > < noframes > < strike > <u > < tt > Web Development: Using HTML5 & CSS3 25 elements are not available in HTML5 anymore and their function is better handled by CSS
Exercise 2: Creating a Landing Page in HTML for a Website Web Development: Using HTML5 & CSS3 26 Create a home page as a landing page of a web site. Format various text contained on a web page. Use HTML elements and attributes to create the home page.
Categories
DesignDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 11,363
- Slides 26
- Favorites 9
- Age 3164 days
Related Slideshows
1
MGV Residential Design projects for different clients, including a New Mexico Adobe project-1-.pdf
mannyvesa
26 views
16
EUNITED_Advocacy and Public Engagement through Visual Media
GeorgeDiamandis11
31 views
31
DESIGN THINKINGGG PPT 2 TOPIC IDEATION.pptx
HibaZaidi2
24 views
36
DESIGN THINKING CHAPTER 1 PPTT PPT 1.pptx
HibaZaidi2
28 views
112
Hinduism and Its History - PowerPoint Slides.pptx
ConorMcCormack10
24 views
20
Service Attributes of Manufactured Parts.pptx
MustafaEnesKrmac
24 views