150 likes | 325 Vues
HTML Formatting Pertemuan 09. Matakuliah : L0182 / Web & Animation Design Tahun : 2008. Learning Outcomes. Pada akhir pertemuan ini, diharapkan mahasiswa akan mampu : Membuat Web sederhana dengan menggunakan HTML formatting. Outline Materi. Text Formatting Tags Changing the Font
E N D
HTML FormattingPertemuan 09 Matakuliah : L0182 / Web & Animation Design Tahun : 2008
Learning Outcomes Pada akhir pertemuan ini, diharapkan mahasiswa akan mampu : • Membuat Web sederhana dengan menggunakan HTML formatting
Outline Materi • Text Formatting Tags • Changing the Font • HTML Background • HTML Images • Embedding Multimedia • HTML Colors • Lists
Changing the Font • You can type <font face=“fontname1, fontname2”>, where fontname2 is your second choice of fonts, should the user not have the first font installed on his system. • Size=“n”, where n is a number from 1 to 7. The default is 3. • Values 1 to 7 for basefont correspond to 8, 10, 12, 14, 18, 24, 36 points respectively.
HTML Background • The <body> tag has two attributes where you can specify backgrounds. The background can be a color or an image. • Bgcolor • The bgcolor attribute specifies a background-color for an HTML page. • Background • The background attribute specifies a background-image for an HTML page. If the image is smaller than the browser window, the image will repeat itself until it fills the entire browser window.
HTML Images • In HTML, images are defined with the <img> tag. • To display an image on a page, you need to use the src attribute. The value of the src attribute is the URL of the image you want to display on your page. • The “alt” attribute is used to define an "alternate text" for an image. The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images.
HTML Images (cont..) <html> <body> <p> <img src="hackanm.gif“ width="20" height="20"> </p> <p> <img src="hackanm.gif“ width="45" height="45"> </p> <p> <img src="hackanm.gif“ width="70" height="70"> </p> </body> </html>
Embedding Multimedia • One of the things that has made the Web so popular is the fact that you can add graphics, sound, animations, and movies to your Web pages.
HTML Colors • HTML colors can be defined as a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). • The lowest value that can be given to one light source is 0 (hex #00) and the highest value is 255 (hex #FF).
Lists • Unordered List : the list items are marked with bullets (typically small black circles). • An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. • Ordered List : The list items are marked with numbers. • An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
Lists (cont..) • Definition List : This is a list of terms and explanation of the terms. • A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag. Each definition-list definition starts with the <dd> tag. • Inside a unordered list, ordered list, and definition-list definition you can put paragraphs, line breaks, images, links, other lists, etc.
Ordered Lists <ol> <ol type="A"> <ol type="a"> <ol type="I"> <ol type="i"> Unordered Lists <ul type="disc"> <ul type="circle"> <ul type="square"> 1. Text A. Text a. Text I. Text i. Text Text Text Text Different Types of Ordered & Unordered List