Element (3A) Element

Size: px

Start display at page:

Download "Element (3A) Element"

Imogene Griffin
7 years ago
Views:

1 Element (3A) Element

2 Copyright (c) 2012 Young W. Lim. Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.2 or any later version published by the Free Software Foundation; with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. A copy of the license is included in the section entitled "GNU Free Documentation License". Please send corrections (or suggestions) to youngwlim@hotmail.com. This document was produced by using OpenOffice and Octave.

3 HTML Element An HTML element ABCDE FGHIJ KLMOP An HTML element content An HTML element starts with a Start Tag An HTML element ends with a End Tag Elements (3A) 3

4 Empty HTML Element An HTML element ABCDE FGHIJ KLMOP An HTML element content An HTML element starts with a Start Tag An HTML element ends with a End Tag An Empty HTML element Elements (3A) 4

5 Nested HTML Elements <html> element <html> element The content of the <html> element <body> ABCDE FGHIJK UUUUU KKKKK </body> </html> <body> element element Elements (3A) 5

6 HTML Block & Inline Elements HTML Block Elements Most HTML elements Involves a new line <ol> <ul> <h1> <div> HTML Inline Elements There is no line break <a> <image> <td> Elements (3A) 6

7 HTML Element (1) In-line Style Similar to selecting text in a word processor After Selecting regions of a text, Change the font color, the font size, the background color, etc In-line element Used as a container for text Elements (3A) 7

8 HTML Element No Style No visual effect <html> <body> ABCDE fghijk UUUUU KKKKK </body> t.html Most HTML elements signify the specific meaning of their content i.e. the element describes, and can be made to function according to, the type of data contained within. Elements (3A) 8

9 HTML Element Inline Style <html> <body> ABCDE fghijk UUUUU KKKKK </body> t.html Most HTML elements signify the specific meaning of their content i.e. the element describes, and can be made to function according to, the type of data contained within. Elements (3A) 9

10 HTML Element Internal Style <style type= text/css.a1 {font-size:20px} </style> #A1 <html> t.html <body> ABCDE fghijk UUUUU KKKKK </body> Most HTML elements signify the specific meaning of their content i.e. the element describes, and can be made to function according to, the type of data contained within. Elements (3A) 10

11 HTML Element External Style <link rel= stylesheet type= text/css href= mystyle.css > t.html mystyle.css #A1 <html>.a1 {font-size:20px} <body> ABCDE fghijk UUUUU KKKKK </body> Most HTML elements signify the specific meaning of their content i.e. the element describes, and can be made to function according to, the type of data contained within. Elements (3A) 11

12 <div> HTML Element Similar to a frame in a word processor Can group texts, graphs, tables, pictures into a one unit by using a frame Block element Used as a container for grouping HTML elements Used also for document layout Elements (3A) 12

13 HTML Element No Style No visual effect <html> <body> ABCDE fghijk UUUUU KKKKK </body> t.html <div> <img src= picture.jpg style= float:right > Most HTML elements signify the specific meaning of their content </div> Elements (3A) 13

14 HTML Element Inline Style <html> <body> ABCDE fghijk UUUUU KKKKK </body> t.html <div style= width:500px > <img src= picture.jpg style= float:right > Most HTML elements signify the specific meaning of their content </div> Elements (3A) 14

15 HTML Element Internal Style <style type= text/css.a1 {width:500px} </style> #A1 <html> t.html <body> ABCDE fghijk UUUUU KKKKK <div id= A1 > </body> <div class= A1 > <img src= picture.jpg style= float:right > Most HTML elements signify the specific meaning of their content </div> Elements (3A) 15

16 HTML Element External Style <link rel= stylesheet type= text/css href= mystyle.css > t.html mystyle.css #A1 <div id= A1 > <html>.a1 {width:500px} <body> ABCDE fghijk UUUUU KKKKK </body> <div class= A1 > <img src= picture.jpg style= float:right > Most HTML elements signify the specific meaning of their content </div> Elements (3A) 16

17 Grouping Selectors p { color:red; } ex1 { background:yellow; } css attribute value Elements (3A) 17

18 Reference References [1] [2] [3] K.H. Koh, HTML, CSS, Javascript (in Korean) Elements (3A) 18

Development Perspective: DIV and CSS HTML layout. Web Design. Lesson 2. Development Perspective: DIV/CSS

Development Perspective: DIV and CSS HTML layout. Web Design. Lesson 2. Development Perspective: DIV/CSS Web Design Lesson 2 Development Perspective: DIV/CSS Why tables have been tabled Tables are a cell based layout tool used in HTML development. Traditionally they have been the primary tool used by web