STRUCTURE AND HTML TAGS. MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

Size: px

Start display at page:

Download "STRUCTURE AND HTML TAGS. MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication"

Nigel Harrison
7 years ago
Views:

1 STRUCTURE AND HTML TAGS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

2 OBJECTIVES This presentation covers the following ACA Exam objectives: 4.1 Demonstrate knowledge of Hypertext Markup Language 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.

3 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

4 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.

5 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)

6 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

7 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

8 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

9 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

10 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.

11 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).

12 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)

13 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.

14 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)

15 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

16 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.

17 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.

18 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

19 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

20 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).

21 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.

22 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>. For an overview, watch the video Inserting Div Tags and IDs. Copyright.2013 MyGraphicsLab/Pearson Education

Introduction to Web Development

Introduction to Web Development Week 2 - HTML, CSS and PHP Dr. Paul Talaga 487 Rhodes paul.talaga@uc.edu ACM Lecture Series University of Cincinnati, OH October 16, 2012 1 / 1 HTML Syntax For Example: