Embed Size (px)
Citation preview
Check out
our website!
www.nvcc.edu/woodbr
idge/computer-lab
Contact Us Location: Open Computer Lab Seefeldt Building #336 NOVA Woodbridge Campus Hussna Azamy (OCL Supervisor) Phone: 703-878-5714 E-mail: [email protected] Hamna Chaudhri (OCL Trainer) Phone: 703-878-5713 E-mail: [email protected]
HTML
© Copyright 2014: Northern Virginia Community College - Woodbridge Open Computer Lab
2
HTML Basics
3
Introduction: Abbreviation for Hyper Text Markup Language, HTML is used for creating webpages.
Creating a Webpage Using Notepad:
To open Notepad click on Start | All Programs | Accessories | Notepad
Next, click File | Save As
Type .htm or .html at the end of your file name. For example “Danielle.html”
From the Save as type drop down menu, select All Files
Click on Save button
Add Head and Body Tags:
Your web page is divided into 2 main sections: the head (where the page title and other
information related to the page is added) and the body (where the page content is added)
4
Previewing Your Webpage: Save all your changes
Right click on your webpage and select Open with
Choose the desired web browser to preview your webpage
Any changes that you make on your webpage, you will need to save it first and then
refresh the browser to view the updates
5
Common Tags Page title: <title></title> This is the title that appears on the web page.
6
Heading 1 – 6: <h1></h1> Headings are defined with the <h1> to <h6> tags. <h1> defines the
most important heading. <h6> defines the least important heading.
Line Break: <br> Use to insert a blank line
Horizontal Rule: <hr> Use to insert a horizontal line
Comments: <!--enter comment -- > Comments are notes that you can add in the code
that will not appear on the web page
7
Paragraph: <p> </p> Use this tag to create a paragraph
Ordered List: <ol></ol> Use this tag to create a numbered list
8
Unordered List: <ul></ul> Use this tag to create a bullet list
List Items <li></li> Use this tag around every item in your ordered/unordered list. See
examples above.
9
Bold and Italics: <b></b> and <i></i> Use these tags for bold and italicize your text.
Adding Images:
Use the <img> tag to add an image to a webpage
In order to view images on your web page, the images must be saved in the same location
as your .html webpage file.
As you can see below, the photo “Jellyfish.jpg” is saved in the same folder as
“Danielle.html”
10
To embed an image type <img src = “filename.extension” alt=
“enter alternative text here” width=”200” height=”200”>
“alt” is used for adding a text description to the image. The alternative text is displayed in
browsers which do not support images. It is also used by the screen readers for disabled
users.
Adding links
To add a link use the following tag: <a href= “url”> url name </a>
11
Text and Background Color
To change the font color and the background color you must specify the color names
inside the body tag
The code is: <body style = “color: pickacolor; background-color:
pickacolor;”>
12
HTML Intermediate
13
Meta Tag: Webpage Description: <meta name="description" content="HTML Workshop"/>
Keywords for Search Engine: <meta name="keywords" content="HTML, workshop, tutorial, html-coding"
/>
Table: Table Border: <table border="1">
Table row: <tr></tr>
Table header: <th></th>
Table data: <td></td>
Example: <table border="1">
<tr>
<th>Fruits</th>
<th>Vegetables</th>
</tr>
<tr>
<td>Apple</td>
<td>Tomato</td>
</tr>
</table>
Style: Text Color: <p style="color:blue;">Text color demo</p>
Background Color: <body style="background-color:yellow;">
Text highlight: <h2 style="background-color:red;">Highlighted text demo</h2>
Font: <p style="font-family:arial;color:red;font-size:20px;">Text font,
color, size demo..</p>
Text Alignment: <h1 style="text-align:center;">Centered text demo.</h1>
Script Tag: You may insert a script in your HTML code to add more interactivity and features to your
website.
Demo: http://www.w3schools.com/tags/tag_script.asp
14
References HTML4 and HTML5 Tutorial. (2014). Retrieved from W3Schools: www.w3schools.com
W3Schools. W3Schools. 26 June 2014. Internet. 26 June 2014.
