Web Design 101. What is HTML? HTML Tags. Web Browsers. <!DOCTYPE html> <html> <body> <h1>my First Heading</h1> <p>my first paragraph.

Size: px

Start display at page:

Download "Web Design 101. What is HTML? HTML Tags. Web Browsers. <!DOCTYPE html> <html> <body> <h1>my First Heading</h1> <p>my first paragraph."

Kristin Daniel
5 years ago
Views:

1 What is HTML? Web Design 101 HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language à A markup language is a set of markup tags The tags describe document content HTML documents contain HTML tags and plain text HTML documents are also called web pages HTML Tags HTML markup tags are usually called HTML tags HTML tags are keywords (tag names) surrounded by angle brackets like <html> HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag The end tag is written like the start tag, with a forward slash before the tag name Start and end tags are also called opening tags and closing tags Web Browsers The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to determine how the content of the HTML page is to be presented/displayed to the user. For example, the following HTML code is written and then displayed like: <!DOCTYPE html> <html> <body> <h1>my First Heading</h1> <p>my first paragraph.</p> </body> </html>

2 HTML Page Structure HTML code essentially works within a structure of tables. Each section of code is read in order of the table it is in. Below is a visualization of an HTML page structure: <html> <body> <h1>my First heading</h1> <p>my first paragraph.</p> </body> </html>

Coding Your First Page Step 1: Start Notepad To start Notepad go to: Start à All Programs à Accessories à Notepad Step 2: Edit Your HTML with Notepad Type your HTML code into your Notepad: à For your

3 Coding Your First Page Step 1: Start Notepad To start Notepad go to: Start à All Programs à Accessories à Notepad Step 2: Edit Your HTML with Notepad Type your HTML code into your Notepad: à For your heading, use your name à For the paragraph section, type in a brief paragraph about yourself. Step 3: Save Your HTML Select Save as in Notepad's file menu. When you save an HTML file, you can use either the.htm or the.html file extension. There is no difference, it is entirely up to you. *Create a new folder within your H:/Media Arts folder called Web Design. You can save all corresponding web documents within this folder.

4 HTML Headings HTML headings are defined with the <h1> to <h6> tags. The text that exists between these tags will be larger than the body text. HTML Paragraphs HTML paragraphs are defined with the <p> tag. The text that exists between these tags will be regular body text. If you want to play with the style of font you can use the following attributes: <b> This is bold font <strong> This is strong font <em> or <i> This is emphasized or italic font <small> This is small font The HTML <title> Element The <title> tag defines the title of the document. The <title> element is required in all HTML/XHTML documents. The <title> element: defines a title in the browser toolbar provides a title for the page when it is added to favorites displays a title for the page in search-engine results HTML Links HTML links are defined with the <a> tag. Example: <a href=" is a link</a> Note: The link address is specified in the href attribute.

5 HTML Images HTML images are defined with the <img> tag. Example: <img src="flowers.jpg" alt="gardenimg3.com" width="104" height="142"> Note: The filename and the size of the image are provided as attributes. The attribute values for size are specified in pixels by default. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display. The URL points to the location where the image is stored. An image named "boat.gif", located in the "images" directory on " has the URL: The browser displays the image where the <img> tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph. *The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.

6 HTML Tables Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc. Table Code Example: <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> Displayed: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 *If you do not specify a border attribute, the table will be displayed without borders. Sometimes this can be useful like if you are creating your whole page within a table, but most of the time, we want the borders to show. To display a table with borders, specify the width using the border attribute: <table border 1 >

7 HTML Colour Each colour that exists has a special code associated with it. Use the following chart to help you program the colours you want on your page. *<br> is an empty element without a closing tag (the <br> tag defines a line break).

8 HTML Your Page Now that you have played with all the different aspects of coding, you will create your own personal webpage. Criteria: Ø Your page must have a title tag Ø You must use 1 heading tag Ø You must have a brief paragraph about yourself within a paragraph tag Ø Include three images that display some of your interests Ø Include three different links that connect to websites you frequently use Ø Use three different colours within the page Ø Create a table (this can be the design of your page or a table within your page) Rubric Knowledge -Understanding of HTML code Thinking -Creative content & design Communication - Communicates information about themselves - (images, sites, paragraph) Application - Applies all required elements within page (13 components)

INTRODUCTION TO WEB USING HTML What is HTML?

Geoinformation and Sectoral Statistics Section (GiSS) INTRODUCTION TO WEB USING HTML What is HTML? HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language