copyright © 2013 mygraphicslab / pearson education structure and html tags mygraphicslab: adobe...

Copyright © 2013 MyGraphicsLab / Pearson Education

STRUCTURE AND HTML TAGS

MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

OBJECTIVES


This presentation covers the following ACA Exam objectives:

4.1 Demonstrate knowledge of Hypertext Markup Language.

4.11 Import tabular data to a web page.

5.3 Modify text and text properties.

5.6 Use basic HTML tags to set up an HTML document, format text, add links, create tables, and build ordered and unordered lists.

5.7 Add head content to make a web page visible to search engines.

STRUCTURE AND HTML TAGS TOPICS

Learn how to separate structure from presentation Learn how to apply HTML structure Learn how to apply HTML in Code view Learn how to apply HTML in Design view Learn how to apply HTML table structure Learn how to apply HTML page layout structure


HTML STRUCTURE

HTML tags give the content meaning (semantics). HTML has tags for: Formatting text Page structure Enabling interactivity

HTML is used for document structure, not for presentation

Properly structured HTML markup consists of an opening tag and a closing tag In XHTML, tags with no closing element are self closing

(example: <br />)

Page information generally appears within the <head> element. Example: Page title, Meta Tags

Page content appears within the <body> element. See Adobe Dreamweaver CS6 Classroom in a Book,

page 21. Copyright © 2013 MyGraphicsLab / Pearson Education

COMMON HTML4 (XHTML1.0) TAGS (1 OF 2)

HTML text formatting <h1></h1> – <h6></h6> – headings 1 thru 6 <p></p> (paragraph) <ul></ul>, <ol></ol> – unordered and ordered lists <li></li> – list items <blockquote></blockquote> - quotation (creates a standalone

indented paragraph)

Tabular data <table></table> – creates table <tr></tr> – creates table row <th></th> – creates table header <td></td> – creates table cell

Layout <div></div> – creates a division (used to divide page content into

discernible grouping. Used extensively to create multicolumn layouts)


COMMON HTML4 (XHTML1.0) TAGS (2 OF 2)

Interactive <a></a> – anchor (creates a hyperlink)

Other tags <!– comment --> – HTML comments (used to add notes with the HTML

that are not displayed in the browser window) <img /> – places an image <strong></strong> – adds semantic emphasis (displays as bold by default) <em></em> – adds semantic emphasis (displays as italic by default) <script></script> – contains a script or links to an external script <meta /> – add metadata in the head section of the document


COMMON HTML5 TAGS (1 OF 2)

HTML5 includes HTML4 and XHTML 1.0 tags. HTML5 is backward compatible.

HTML5 tags in Dreamweaver CS6 can only be added in Code view. <header></header> – designates the introduction of a document or

section <nav></nav> – designates a section of navigation <section></section> – designates a section in a document

Example: a chapter or group of related content

<article></article> – designates independent, self-contained content which can be syndicated independently from the rest of the site

<canvas></canvas> – designates graphic content created using a script See Adobe Dreamweaver CS6 Classroom in a Book, pages 30–34.


COMMON HTML5 TAGS (2 OF 2)

<aside></aside> – designates sidebar content that is related to the surrounding content

<footer></footer> – designates a footer for a document or section <figure></figure> – designates a section of standalone content

containing an image or video <figcaption></figcaption> – designates a caption for a <figure>

element <audio></audio> – designates multimedia content, sounds, music, or

other audio streams <video></video> – designates video content <source></source> – designates media resources for audio or video


HTML IN CODE VIEW

You can enter HTML tags in Dreamweaver code view.

HTML tags are color-coded for quick visual identification. You can change coloring in the

Preferences > Code Coloring area.

The Property inspector and tag selector reflect the HTML format. You may need to click Refresh in the

Property inspector after code is altered.

See Adobe Dreamweaver CS6 Classroom in a Book, pages 26–29.


APPLY SOURCE FORMATTING

Dreamweaver-generated code can be organized and colored in Code view by choosing Commands > Apply Source Formatting.

The formatting is based on set preferences. HTML version can be converted by choosing

File > Convert.


HTML CODE HINTING

Code hinting is menu listing available for HTML tags and attributes (including HTML5).

Code hinting is invoked when you type the beginning of a tag: Type a right angle bracket (<). To insert an attribute, place the insertion point

immediately after a tag name, and press the spacebar.

Code hinting is activated by default. You can change code hinting under

Preferences > Code Hints.

Code hinting automatically closes tags. You can force code hints to appear.

Press Ctrl+spacebar (Windows and Mac).


HTML STRUCTURE SHORTCUTS

You can apply formatting using the Format menu or via keyboard shortcuts. Shortcuts can be used in Code or

Design view.

Headings <h1> – <h6> Press Ctrl+1 – Ctrl+6 (Windows) Press Cmd+1 – Cmd+6 (Mac)

Paragraph <p> Press Ctrl+Shift+P (Windows) Press Cmd+Shift+P (Mac)

Remove formatting Press Ctrl+0 (Windows) Press Cmd+0 (Mac)


DREAMWEAVER QUICK TAG EDITOR

The Quick Tag Editor provides easy and convenient access to HTML tags. Select content in the page, and click the Quick Tag Editor to wrap content

within a tag. Or place your cursor in the page and click to insert tag. Or choose Modify > Quick Tag Editor. Or click Quick Tag Editor in the Property inspector. Or press Ctrl+T (Windows) or Cmd+T (Mac).

See Adobe Dreamweaver Classroom in a Book, page 90.


HTML FORMAT IN DESIGN MODE

Apply HTML format using the Property inspector: headings 1-6 paragraph none preformatted (html <pre> tag)

Headings <h1> – <h6> Ctrl+1 – Ctrl+6 (Windows) Cmd+1 – Cmd+6 (Mac)

Paragraph <p> Press Ctrl+Shift+P (Windows) Press Ctrl+Shift+P (Mac)

Remove formatting Press Ctrl+0 (Windows) Press Cmd+0 (Mac)


HTML UNORDERED LISTS

Select multiple paragraphs in the Design view, and click Unordered List in the Property inspector to make a bulleted list. You can also use Format > List >

Unordered List.

This generates <ul> and <li> tags.

Unordered lists are used extensively for structuring navigation bars and menus.

See Adobe Dreamweaver Classroom in a Book, pages 175–178.


HTML ORDERED LISTS

Select multiple paragraphs in the Design view, and click Ordered List in the Property inspector to make a numbered list. You can also use Format > List

> Ordered List.

This generates <ol> and <li> tags.


HTML STRONG/EMPHASIS SEMANTICS

Strong (B) Press B in the Property

inspector Format > Style > Bold Ctrl+B (Windows) / Cmd+B

(Mac) Sets the <strong> HTML tag

Strong (I) Press I in the Property inspector Format > Style > Italic Ctrl+I (Windows) / Cmd+I (Mac) Sets the <em> HTML tag

See Adobe Dreamweaver Classroom in a Book, page 24.


HTML BLOCKQUOTE

The HTML blockquote creates a standalone indented paragraph. Click the blockquote (indent) symbol

in the Property inspector. Or press Ctrl+Alt+] (Windows) or

Cmd+Option+] (Mac). Or choose Format > Indent.

This generates the <blockquote> and </blockquote> tags.



HTML TABLES

Insert tables in your layout: Click Table in the Common or Layout

category in the Insert panel. Or choose Insert > Table. Or press Ctrl+Alt+T (Windows) or

Cmd+Option+T (Mac).

The Table dialog box lets you set the following items: Number of rows and columns Table widths (% or pixels) Border thickness Cell padding and spacing (2 pixels by

default) Header row or column designation Summary (used for assistive technology)



HTML TABLE PROPERTIES

Table properties appear when a table is selected in the page. Good practice to use the tag selector

for selecting a table

Avoid using HTML formatting in the Property inspector, such as: Width Cell padding and spacing Border Alignment

Table styling should be accomplished using Cascading Style Sheets (CSS).


ADDING TABLE ROWS AND COLUMNS

To add rows, click in a row, and then do one of the following: Click Insert Row Above or

Insert Row Below in the Layout category in the Insert panel.

Choose Insert > Table Objects.

To add columns, click in a column, and do one of the following: Click Insert Column To The Left

or Insert Column To The Right in the Layout category in the Insert panel.

Choose Insert > Table Objects.

For an overview, watch the video Inserting a Table.


HTML LAYOUT <DIV> TAGS

<DIV> tags are used for structuring page layout.

They divide page content into discernible grouping areas.

Insert <DIV> tags via the Layout category in the Insert panel or by choosing Insert > Layout Objects > Div Tag.

<DIV> tag insertion options: At insertion (cursor) point Wrap around selection (if selection is made) After start of tag (embeds within) Before end of tag (embeds within)

IDs are commonly added to <DIV> tags. HTML5 <ARTICLE>, <SECTION>,

<HEADER>, <ASIDE>, and <FOOTER> tags can be used as alternates to <DIV>.

Copyright © .2013 MyGraphicsLab/Pearson Education

For an overview, watch the video Inserting Div Tags and IDs.

copyright © 2013 mygraphicslab / pearson education structure and html tags mygraphicslab: adobe...

Documents