Skill Area 323: Design and Develop Website. Multimedia and Web Design (MWD)

Size: px

Start display at page:

Download "Skill Area 323: Design and Develop Website. Multimedia and Web Design (MWD)"

Christine Lyons
6 years ago
Views:

1 Skill Area 323: Design and Develop Website Multimedia and Web Design (MWD)

2 323.2 Work with Text and Hypertext (7 hrs) Add headings, subheadings and body text Format text according to specifications Apply absolute and relative links Create link

3 Basic Document Structure Html element is called root element because it contains all elements in the document and it may not be contained within any other element. Used for both HTML AND XHTML documents. HTML Hypertext Markup Language (not hotmail!)

4 Basic Document Structure (cont) Head comes after the html element. Inside head contains the title element. The body element comes after the head and contains everything that we want to show up in the browser.

5 Minimum (X)HTML document structure <html> 1 <head> 2 <title>title here </title> 4 </head> 4 <body> Web page content here. </body> </html>

6 (X)HTML document structure description reference: 1. Identifies the document as written in HTML or XHTML. 2. The head provides information about the document. 3. A descriptive title is required. 4. The body contains the content that displays in the browser.

8 E X E R C I S E

9 E X E R C I S E - 2

Headings are used to provide logical hierarchy or outline to a document.

10 Heading Heading is the brief title that tells readers about the content of the section that follows. Headings are used to provide logical hierarchy or outline to a document. Header of the HTML document:<head>...</head>. Usually the title should be included in the head, for example: <head> <title>the title</title> </head>

11 Heading (cont) There are six levels of headings in (X)HTML, from h1 to h6: <h1>heading1</h1> <h2>heading2</h2> <h3>heading3</h3> <h4>heading4</h4> <h5>heading5</h5> <h6>heading6</h6>

12 Sub-heading Subheadings are subordinate of headings, indicating subsections with the major section in a document.

13 E X E R C I S E

14 How to format a Heading in Dreamweaver When you are creating a website in Dreamweaver, you will find the need to make some of your text into headlines. You can easily turn text into headlines by applying the heading format to any text that you select. Headings are presets that are a certain size of font which are bold. Follow the steps below to create headlines for your Dreamweaver pages. Application: Macromedia Dreamweaver Instructions 1. Start Dreamweaver and open an existing document that you would like to create headlines in, or start a new HTML document by clicking the "New" selection on the Dreamweaver introduction splash screen. Enter some text in the new document that you would like to convert to a headline.

15 How to format a Heading in Dreamweaver (cont) 2. Use your mouse to select the text you want to turn into a headline. You can select text by clicking and dragging with your mouse over the text or triple clicking with your mouse to select a line of text. 3. Choose the "Text" menu, point to the "Paragraph Format" option and click on "Heading 1," "Heading 2," "Heading 3," "Heading 4," "Heading 5" or "Heading 6" to apply a heading format to your text. 4. Apply any other text formatting you would like to have associated with your headline, such as center aligning or italicizing the text, using the different options under the "Text" menu.

16 Body Text Formatting There are varieties of aspects to formatting text in a html document. Bold and Italic are the two most common types of styles. The Strong style has the same effect as Bold and Emphasis has the same effect as Italic.

17 Body Text Formatting (cont) By default, Dreamweaver uses the <strong> and <emphasis> tags when you format text to be Bold or Italic. Like a word processor, there are other styles available such as Teletype, Underline, Strikethrough, and the others.

18 Text Style Samples This is an example of normal text. This is an example of a Bold style using the <strong> tag. This is an example of the Italic style using the <emphasis> tag. This is an example of the Teletype style using the <tt> tag. This is an example of the Underline style using the <u>tag. This is an example of the Strikethrough using the <s> tag. This is an example of the Code style using the <code> tag.

19 Text Style Samples (cont) This is an example of the Variable style using the <var> tag. This is an example of the Sample style using the <samp> tag. This is an example of the Keyboard style using the <kbd> tag. This is an example of the Citation style using the <cite> tag. This is an example of the Definition style using the <dfn> tag. This is an example of the Deleted style using the <del> tag. This is an example of the Inserted tag using the <ins> tag.

20 Text Formatting Exercise Dreamweaver Tutorials refer to: Dreamweaver_Tutorials_ex1.pdf

21 Hyperlink Hyperlink is a word, phrase ot image that you click on to jump to a new document or a new section within the current document. Hyperlinks are created with an "href" tag (hyperlink reference). In it's simplest form the tag looks like this: <a href="page1.html">go To Page 1</a> There are two distinct types of hyperlink: 1. Absolute Links 2. Relative Links

22 Absolute Links An absolute link (or "absolute URL link") contains a complete internet address, just the same as if you typed the address into your browser's address bar. It doesn't matter where the source page is in relation to the destination page, the link will always work as long as the destination page exists. Most absolute links begin with " and follow this simple format:\ <a href=" To My Site</a>

23 Relative Links Relative link is a hyperlink in a web page that does not include the full path to the destination document referred to in the URL part of the link. Relative links are actually divided into two further categories: 1. Document-Relative 2. Site-Root-Relative

html in the same directory (Tutorials), we need not write out the entire URL.

24 Relative Links For example, if we are looking at the index.html file addressed in the previous example, and we want to link to a file called page1.html in the same directory (Tutorials), we need not write out the entire URL. In fact, either of the following anchor tags will work: <A HREF = " here</a> <A HREF = "page1.html">here</a>

25 Link An link opens a new blank message window (using the mail program associated with the user s browser) when clicked. In the message window, the To box is automatically updated with the address specified in the link. Create an link using the Insert Link command 1. In the Document window s Design view, position the insertion point where you want the link to appear, or select the text or image you want to appear as the link.

26 link (cont) 2. Do one of the following to insert the link: Select Insert > Link. In the Common category of the Insert bar, click the Link button. 3. In the Text box, type or edit the body of the In the box, type the address, then click OK. Create an link using the Property inspector 1. Select text or an image in the Document window s Design view. 2. In the Link box of the Property inspector, type mailto: followed by an address. 3. Do not type any spaces between the colon and the address.

27 References links.html ative_absolute_links.html /help.html?content=WSc78c5058ca073340dcda91 10b1f693f21-7ceb.html tutorial_format_text.html

28 References (book) Robbins, Niederst Jennifer, Learning Web Design, Third Edition, A Beginner s Guide to X(HTML), Style Sheets and Web Graphics, Chapter 5 : Marking Up Text, pg73, 2007, O Reilly Media Inc, ISBN:

Certified HTML Designer VS-1027

Certified HTML Designer VS-1027 VS-1027 Certification Code VS-1027 Certified HTML Designer Certified HTML Designer HTML Designer Certification allows organizations to easily develop website and other web based applications which are