Intro HTML

Hyper Text Markup Language
A markup language designed for the creation of web pages and other information viewable in a browser The basic language used to write web pages File extension: .htm, .html
Opening tag
<html> <head> <title> Head </title> Section </head> <body> Body

Section
Title of the document

Title is not A heading!!!
Displayed on The title bar of A page!!!
</body>
Content of the page goes here
Corresponding Closing tag
</html>
HEAD section has nothing to do with headings. (This is a very confusing point!)
<html>  <!-- Comments are ignored by the browser and are not displayed -
->
<head> <title> Title of the page goes here </title> </head>
<body> Text that appears on the page goes here. Text that appears on the page goes here. </body>
</html>
The text is not displayed on separate lines as you typed it in
Title is in the title bar, not inside the browser window.
Keep your Notepad window and the Browser showing your page opened. Add another line to the Body section of your Demo1.html file. Save the file. Your Browser doesnt show any changes. Click Reload/Refresh button on the Standard Bar. Now you can see changes.
As you have noticed, any spacing or line breaks in the HTML file is ignored by the browser when the text is displayed on the screen. In order to insert a new line, we must use the < BR /> tag which inserts a line break. This tag has no closing pair; to indicate this, the tag has / inside brackets.
The paragraph tag, < P > </P>,is used to break the text into paragraphs. If we want some text to appear in bold face, we use the < B > and < /B > tags around the text, for example: < B > This will appear in bold face< /B > . To display text in italics, we use < I > and < /I > around the text. It is poor style to use underlining in Web pages because of the confusion with hyperlinks. (but you can do it using <U> and </U> tags.
What appears after <br /> tag Will go to the new line
New paragraph Center alignment Bold and italic
What appears after <br /> tag Will go to the new line
Horizontal line
Headings are not Titles. <h1></h1> Big <h2></h2> Medium <h3></h3> Small <h6></h6> Smallest Lists: <ul></ul> unordered list <ol></ol> ordered list <li></li> list item (must put for each item of the list)
1. 2. 3. 4. 5. 6.
Open Notepad Click on File -> Save as In the File name pull-down box, type in webpage.html Click on Save Type in content for your file Once you finished the content, click on File -> Save
For example: <b>, <font>,<title>, <p> etc. Tag usually goes with pair: an open tag (<b>) and an end tag (<\b>)
Effect Bold Italic Code B I Code Used <B>Bold</B> <I>Italic</I> What It Does Bold Italic
Single tag: <hr>,<br> Tags are NOT case sensitive
<html> <head> <title> Page Title Goes Here </title> </head>

<body>
content goes here

</body> </html>
Bgcolor Specifies a background-color for a HTML page. <body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black">
Background Specifies a background-image for a HTML page <body background="clouds.gi f"> <body background="http://w ww.w3schools.com/clo uds.gif">
Put text on a webpage
Put text in center of a page

<center>Hello</center> Output: Hello
<p>Today is my first day at my new job, Im so excited!</p> Output: Today is my first day at my new job, Im so excited!
Put text on the right of a page

<p align=right>Hello</p> Output: Hello
To change text size

Output:
<font size=+3>Hello</font>
Hello
Tag attribute
To change text color
<font color=red>Hello</font> Output: Hello
Using both
Output:
<font size=+3 color=red>Hello</font>
Hello
Result < > &
Description Non-breaking space Less than Greater than Ampersand Quotation mark Copyright
Entity Name < > & " ©
There are 6 heading commands.

<H1>This is Heading 1</H1>
Unordered list
Code: <ul> <li>Coffee</li> <li>Milk</li> </ul> Output:
Coffee Milk
Ordered list
Code: <ol> <li>Coffee</li > <li>Milk</li> </ol> Output:
1. Coffee 2. Milk
<table border=1"> <tr> <th>Heading</th> <th>Another Heading</th> Heading </tr> <tr> Row 1, cell 1 <td>row 1, cell 1</td> <td>row 1, cell 2</td> Row 2, cell 1 </tr> <tr> <td>row 2, cell 1</td> <td></td> </tr> </table>
Another Heading
Row 1, cell 2
A Hypertext link
< a href=http://www.iusb.edu>IUSB Home</a> Output: IUSB Home
A Email link
<a href=mailto:vkwong@iusb.edu> Email me</a> Output: Email me
.gif
Graphics Interchange Format
.jpeg or .jpg
Joint Photographic Experts Group
.bmp
bitmap
Place all images in the same directory/folder where you web pages are <img src> is a single tag <img src=image.gif>
Turn an image into a hyerlink
Output: <a href=http://www.iusb.edu><img src=image.gif></a> Output:
Computer images are made up of pixels <IMG HEIGHT=100" WIDTH=150" SRC="image.gif">
Height
Width
A form is an area that can contain form elements. <form></form> Commonly used form elements includes:
Text fields Radio buttons Checkboxes Submit buttons
Used when you want the user to type letters, number, etc. <form> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form>
Output
First name: Last name:
When user clicks on the Submit button, the content of the form is sent to another file. <form name="input" action="html_form_acti on.asp" method="get"> Username: <input type="text" name="user"> <br> <input type="submit" value="Submit"> </form>
Output
Username:
Used when you want the user to select one or more options of a limited number of choices. <form> <input type="checkbox" name="bike value=bi ke> I have a bike <br> <input type="checkbox" name="car value=car > I have a car
Output
I have a bike I have a car
Used when you want the user to select one of a limited number of choices. <form> <input type="radio" name="sex" value="male"> Male <br> <input type="radio" name="sex" value="female"> Female </form>
Output
Male Female
Used when you want to get input from user. <form> <p>Please provide your suggestion in the text box below:</p> <textarea row=10 cols=30> </textarea> </form>
Output Please provide your suggestion in the text box below:
Used when you want user to respond with one specific answer with choices you given. <p>Select a fruit:</p> <select name"Fruit"> <option selected> Apples <option> Bananas < option > Oranges </select>
Output Select a fruit:

Intro HTML

Enviado por

Dados do documento

Descrição original:

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Intro HTML

Enviado por

Direitos autorais:

Formatos disponíveis

Hyper Text Markup Language

<html> <head> <title> Head </title> Section </head> <body> Body

Title of the document

Displayed on The title bar of A page!!!

Content of the page goes here

Corresponding Closing tag

<head> <title> Title of the page goes here </title> </head>

The text is not displayed on separate lines as you typed it in

Title is in the title bar, not inside the browser window.

New paragraph Center alignment Bold and italic

Single tag: <hr>,<br> Tags are NOT case sensitive

<html> <head> <title> Page Title Goes Here </title> </head>

content goes here

Put text on a webpage

Put text in center of a page

Put text on the right of a page

To change text size

To change text color

<font color=red>Hello</font> Output: Hello

<font size=+3 color=red>Hello</font>

Result < > &

Entity Name &nbsp; &lt; &gt; &amp; &quot; &copy;

There are 6 heading commands.

Computer images are made up of pixels <IMG HEIGHT=100" WIDTH=150" SRC="image.gif">

Output Please provide your suggestion in the text box below:

Output Select a fruit:

Você também pode gostar

Entity Name < > & " ©