Copyright © 2013 MyGraphicsLab / Pearson Education STRUCTURE AND HTML TAGS MyGraphicsLab: Adobe...
-
Upload
victoria-lawson -
Category
Documents
-
view
217 -
download
1
Transcript of 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
Copyright © 2013 MyGraphicsLab / Pearson Education
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
Copyright © 2013 MyGraphicsLab / Pearson Education
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)
Copyright © 2013 MyGraphicsLab / Pearson Education
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
Copyright © 2013 MyGraphicsLab / Pearson Education
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.
Copyright © 2013 MyGraphicsLab / Pearson Education
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
Copyright © 2013 MyGraphicsLab / Pearson Education
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.
Copyright © 2013 MyGraphicsLab / Pearson Education
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.
Copyright © 2013 MyGraphicsLab / Pearson Education
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).
Copyright © 2013 MyGraphicsLab / Pearson Education
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)
Copyright © 2013 MyGraphicsLab / Pearson Education
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.
Copyright © 2013 MyGraphicsLab / Pearson Education
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)
Copyright © 2013 MyGraphicsLab / Pearson Education
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.
Copyright © 2013 MyGraphicsLab / Pearson Education
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.
Copyright © 2013 MyGraphicsLab / Pearson Education
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.
Copyright © 2013 MyGraphicsLab / Pearson Education
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.
See Adobe Dreamweaver Classroom in a Book, pages 178–181.
Copyright © 2013 MyGraphicsLab / Pearson Education
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)
See Adobe Dreamweaver Classroom in a Book, pages 182–195.
Copyright © 2013 MyGraphicsLab / Pearson Education
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).
Copyright © 2013 MyGraphicsLab / Pearson Education
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.
Copyright © 2013 MyGraphicsLab / Pearson Education
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.