web design basics · html tags tags are used to classify pieces of content on your webpage. tags...
TRANSCRIPT
Web Design
Basics
2
Introduction
2
The purpose of this document is to provide information for using basic HTML to create web pages by introducing the following concepts:
HTML Tags
HTML
Tags
Formatting
Background
Images
Hyperlinks
Links
Where to get more info
3
HTML
HyperTextMarkupLanguage is a computer language used to develop webpages.
HTML is a human readable language that tells the web browser how the page should look.
Requires no special software – can be coded in any text editor, such as Notepad.
3
4
HTML Tags
Tags are used to classify pieces of content on your webpage. Tags can be many things from images, text formatting, tables, lists, links, etc.
Most tags take the the form <tag>information </tag>
The first <tag> is the opening tag which states what action you are about to perform and the second </tag> ends whatever action your just performed.
For example, if you wanted to make the phase “Hello World” bold, you would type it like this: <b>Hello World</b>.
5
Nested Tags What if you wanted to make the text Hello World both bold and underlined?
Tags can be nested inside of one another.
When nesting tags the last tag that you opened should be the first one closed! For example, to both bold and underline, type the following:
<b><u>Hello World</u></b>
OR
<u><b>Hello World </b></u>
6
HTML Document Tags All HTML Documents should have these tags.
<html> opens the document
<head> contains information that is not viewed directly in the browser window such as the web page title or any additional elements to your page such as javascript
<title> My Webpage Title </title> title that is shown in the browser bar
</head>
<body> the text that will be displayed in your browser
Hello World!
</body>
</html>
7
Let's Try It Open a text editor, such as Notepad, and enter the text as
shown:
8
The main page of a web page is usually named “index.html”
It is critical to save the file type as “html”, instead of “txt”, which is the default.
Saving the File
9
Locate index.html on your computer
Right click and choose Open With
Select the web browser you wish to use
Viewing as a webpage
After updating your html file, always save the changes, then press F5 to view the changes to your webpage in your browser.
10
Basic HTML Tags
You can use as many tags at one time as you’d like.
For example:
<B><I><U>Text Text Text</B></I></U>
Looks like:
Text Text Text
Code Code Used Results
B <B>Bold</B> Bold
I <I>Italic</I> Italic
U <U>Underline</U> Underline
11
Manipulating Text
Heading Commands
<H1>This is Heading 1</H1>
<H2>This is Heading 2</H2>
<H6>This is Heading 6</H6>
Heading commands create nice, bold text and are quite easy
to use. It's a simple <H#> and </H#>command.
12
Font Size & Color There are twelve font size commands
+6 through +1 and -1 through -6.
+6 is the largest (it's huge); -6 is the smallest.
<FONT SIZE="+1">This is +1</FONT>
HTML uses Hex Codes for colors. A hex code is a 6 digit code that translates into a specific color.
<FONT COLOR=“#FFOO99”>Red Text</FONT>
Color names work just as well usually; COLOR=“blue”
13
Background
To set the background color
<body bgcolor="pink">
Or
<body bgcolor="#FF69B4">
Color chart can be found here:
http://www.w3schools.com/html/html_colornames.asp
14
Font Face
To change the Font of your text, use the Face attribute.
<FONT FACE=“Arial”>Arial Text</FONT>
Web safe fonts: Arial Arial Black
Courier New
Comic Sans Georgia
Impact
Times New Roman
Trebuchet
Verdana
15
Text Alignment
To center text, simply place <CENTER> before the text, and </CENTER> at the end of the text you want centered.
To move text to the left or the right, use the <P> tag.
<P ALIGN=“right”>Text is pushed to the right.</P>
<P ALIGN=“left”>Text is pushed to the left.</P>
16
Text Tricks
To move text across the screen place <marquee> before the text, and </marquee> after the text . This also works on images.
To have blinking text use the <blink> tag. Remember to also use the closing tag.
<blink> Hi! </blink>
Note: these tricks don't work with all browsers
17
Other Text Tags These tags do not require a closing tag.
Tag Result
<HR> This command gives you a line across the page. (HR stands for Horizontal Rule)
<BR> This BReaks the text and starts it again on the next line. In an HTML document, you need to denote where you want every carriage return with a <BR>.
<P> This stands for Paragraph. P defines a paragraph. Browsers automatically add some space before and after each paragraph.
18
Images
The command to place an image is IMG SRC. <IMG SRC=“image.jpg">
You can manipulate an image's size, alignment, and placement on page, just like text.
<IMG ALIGN=“right” SRC=“image.jpg”>
or
<IMG HEIGHT=“##” WIDTH=“##” SRC=“image.jpg>
19
Making HyperLinks
To link to other websites:
<A HREF=“www.google.com”>Google</A>
You can make images into links:
<A HREF=“www.google.com”><IMG SRC=“image.jpg”></A>
20
List
There are two types of list
Ordered List
Unordered List
List have items that are either numbered(ordered) or unnumbered(unordered)
Use an ordered list when order is important
Use an unordered list when order isn’t important
21
Ordered List
<b>My Morning Routine</b>
<ol>
<li>Wake up</li>
<li>Shower</li>
<li>Eat breakfast</li>
</ol>
My Morning Routine
1. Wake up
2. Shower
3. Eat breakfast
Code Result
Ordered lists are numbered
22
Unordered List
<b>Grocery List<b>
<ul>
<li>Eggs</li>
<li>Butter</li>
<li>Butter Flavoring</li>
<li>Lemon Extract</li>
<li>Sugar</li>
<li>Flour</li>
</ul>
Grocery List
Eggs
Butter
Butter Flavoring
Lemon Extract
Sugar
Flour
Code Result
23
Helpful Links
Learn more about Creating Websites: http://www.w3schools.com/ HTML Color Picker: http://www.w3schools.com/tags/ref_colorpicker.asp Color Scheme Designer: http://colorschemedesigner.com/ Free Background Images: http://www.grsites.com/archive/textures/ Free Microsoft Graphics: http://office.microsoft.com/en-us/images/