Structuring Content with HTML UNIT D HTML Tags

Structuring Content with HTML UNIT D

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

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

Semantic Markup • Semantic markup: using HTML tags to mark up elements in a meaningful and descriptive way • <h 1> first heading • <h 2> second heading • <h 3> third heading

Common Text Elements • Table D-1 Page 75 Element Tag Purpose Paragraph <p> Creates a paragraph of text Line break <br/> Creates a line break to force text to the next line while skill keeping it in the same paragraph Unordered list <ul> Creates a bulleted list Ordered list <ol> Created a numbered list Headings: <h 1> through <h 6> <h 1> , <h 2> <h 3>, <h 4> <h 5>, <h 6> Creates headings with <h 1> being the highest level and <h 6> being the lowest

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.

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. • <h 1> • <h 2> • <h 3> • <h 4>

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

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 cont. • Definition Lists: used to list terms and their definitions • Not used as often.

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”

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.

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 p 83

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 p 83 • Inline Styles: placed directly around content • Not a good option- can’t be reused

CSS tools available Tool Use to Apply Style Task Pane Apply, remove, modify, rename, and delete styles; attach or detach external Cascading Style Sheets (CSS); select all instances of a style; and go to the code that contains a style’s rule set Manage styles Task Pane Perform all the functions of the Apply Styles task pane; move styles between external and internal style sheets; and move the location of a style within a style sheet CSS Properties Task Pane View all styles of current selection, the order of precedence of those styles, and all properties and values of the styles Style Toolbar Apply, rename, and remove styles Style Application Toolbar Control how styles are applied manually to page elements CSS Reports View reports of style errors and styles that are in use or on your page or site

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 pageit 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

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.

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.