1 / 18

Structuring Content with HTML

Structuring Content with HTML . UNIT D. HTML Tags. HTML tags: text enclosed in angle brackets that surround pieces of Web page content. <1i> tag = list opening tag <1i>study for test</1i> “study for test” in a list </1i> tag = list closing tag. HTML Elements.

cain-keith
Download Presentation

Structuring Content with HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Structuring Content with HTML UNIT D

  2. HTML Tags • HTML tags: text enclosed in angle brackets that surround pieces of Web page content. • <1i> tag = list opening tag • <1i>study for test</1i> • “study for test” in a list • </1i> tag = list closing tag

  3. HTML Elements • Element: the combination of an opening tag, content and closing tag • Attributes: describe other properties of the element • Markup: the use of tags to describe the structure of a document

  4. Semantic Markup • Semantic markup: using HTML tags to mark up elements in a meaningful and descriptive way • <h1> first heading • <h2> second heading • <h3> third heading

  5. Common Text Elements • Table D-1 Page 75

  6. Screen Reader • People who are blind or have severely impaired eyesight use software called screen reader. • Uses a synthesized voice to read aloud the text that is on the screen. • If HTML tags are absent or incorrectly applied, it makes it difficult or impossible for visitors.

  7. Headings • HTML has 6 Levels of Heading , but usually you will only use 3 or 4 • Visual hierarchy: varying the size of the text elements in relationship to importance. • <h1> • <h2> • <h3> • <h4>

  8. XHTML • Extensible Hypertext Markup Language • Expression uses XHTML • XHTML is a newer version of HTML that has slightly different rules and tags. • Still uses .htm or .html

  9. Lists – page 80 • Ordered Lists: appear numbered by default 1. list 2. list 3. list • Unordered Lists: appear with bullets beside them by default • list • list • list

  10. List cont. • Definition Lists: used to list terms and their definitions • Not used as often.

  11. Cascading Style Sheets (CSS) • CSS Style Rule: (referred to as style) describes how a particular element or piece of content should be displayed. • CSS is the design of your page, it is what makes your website “LOOK GOOD”

  12. How CSS Style Rules Work • Style Rule has 2 Parts, the Selector and the Declaration. • Selector: tells the browser what the style should apply to. • 3 types: IDs, elements, classes • ID: only be used once on a page and is used with a <div> • Elements and Classes will be discuss later.

  13. Style Rule part 2 • Declaration: describes what properties you want to change and how you want to change them. • Each declaration has a property and a value. • Property: describes what to change • Value: describes how to change • Figure D-12 p83

  14. Options for Placing Style Rules • Internal style sheet: directly in your HTML • Convenient but limits you to only used in one page • External style sheet: separate file with a .css extension • Good option- time saving • Applies to all pages at a time • Figure D-13 p83 • Inline Styles: placed directly around content • Not a good option- can’t be reused

  15. CSS tools available

  16. Creating an Element-Based Style Rule • Element- Based: redefines the look of a HTML element. • Write a rule to make all unordered list have a special icon beside them. • Inheritance: when a style is applied to an element on a page- it is applied to all elements it contains • <body> surrounds all the page content, if you apply a style to the <body> it will apply to all content

  17. Modifying a Style Rule • Pixel: the basic unit of measurement for anything displayed on a computer screen. • Hex value (hexidecimal code): a sequence of six numbers and/or letters used to define a specific color in CSS rules.

  18. Creating a Class-Based Style Rule- p 88 • Class-based rule: a style rule that can be created and applied to any selected content or element. • Class-based styles must be manually applied to content.

More Related