Sie sind auf Seite 1von 18

HTML

(An Introduction)

John Ryan B. Lorca Instructor I

What is HTML?
Hypertext Markup Language (HTML) A text markup language used to create documents for the web. HTML defines the structure and layout of a web document by using a variety of tags and attributes. The file extension are .html or .htm

HTML Tags
Tags are positioned within the HTML code to apply a certain format It is denoted by <tag_name>, which may have to be closed Example:
<html> ... </html> <br /> -> tag enclosing the HTML code -> line break

HTML Tags: Attributes


Tags do have attributes/properties to set Example:
<font> tag have:
face color Size

usage: <font size=3>some text</font>

General Structure of HTML Code


<html> <head><title></title> <body> some code here </body> </html>

Some Useful Tags


<b>some text</b> - make text bold <strong>some text</strong> - make text bold <i>some text</i> - make text italic <em>some text</em> - make text italic <u>some text</u> - make text underlined <sup>some text</sup> - make text superscript <sub>some text</sub> - make text subscript <br /> - line break <hr /> - horizontal line
6

<font> tag
<font face=Verdana>some text</font> <font color=red>some text</font>

<font size=4>some text</font>


<font face=Verdana color=red size=4>some text</font>

<p> tag (paragraph)


<p>The quick brown fox jumps over the lazy dog.</p> <p align=center>The quick brown fox jumps over the lazy dog.</p>

Align: justify, left (default), right


8

<img> tag (inserting image)


Absolute Path
<img src=c:\myfolder\images\pic.jpg />

Relative Path
<img src=images/pic.jpg />

Linking Pages
Links (or hyperlinks) are text or images or other objects that, when clicked, redirects the browser page/location to another page/location Format: <a href=some_page.html>some text</a>

10

Linking Within the Page


<a href=#test>Next Section</a> Some text...some text ...some text ...some text ...some text ...some text ...some text... <a name=test>New Section</a> Some text...some text ...some text ...some text ...some text ...some text ...some text...
11

<marquee> tag
Makes text, images, or other objects move Directions: up, down, left (default), right Format:
<marquee>some text</marquee> <marquee direction=up>some text</marquee>

12

<blink> tag
Make text blink (only available to Mozilla and some other browsers) Format:
<blink>blinking_text</blink>

13

HTML Table
<table border=1> <tr> <td>some text</td> <td>some text</td> some text some text </tr> <tr> some text some text <td>some text</td> <td>some text</td> </tr> </table>

HTML Table: Merging Cells


<table border=1> <tr> <td colspan=2>some text</td> </tr> <tr> <td>some text</td> <td>some text</td> </tr> some text </table>

some text some text


15

HTML Table: Merging Cells


<table border=1> <tr> <td rowspan=2>some text</td> <td>some text</td> </tr> <tr> <td>some text</td> </tr> some text some text </table>
some text
16

Web Colors
English Names
red green blue

Hexadecimal
#FF0000 (red) #00FF00 (green) #0000FF (blue)
17

References
www.w3schools.com Microsoft Help Center

18

Das könnte Ihnen auch gefallen