Introduction. The purpose of this document is to provide information for using basic HTML to create web pages by introducing the following concepts:

Size: px

Start display at page:

Download "Introduction. The purpose of this document is to provide information for using basic HTML to create web pages by introducing the following concepts:"

Ilene Anthony
6 years ago
Views:

1 Web Design Basics

2 Introduction 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 2 2

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 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>. 4

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> 5

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> 6

7 Let's Try It Open a text editor, such as Notepad, and enter the text as shown: 7

8 Saving the File 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. 8

9 Viewing as a webpage Locate index.html on your computer Right click and choose Open With Select the web browser you wish to use After updating your html file, always save the changes, then press F5 to view the changes to your webpage in your browser. 9

10 Basic HTML Tags Code Code Used Results B <B>Bold</B> Bold I <I>Italic</I> Italic U <U>Underline</U> Underline 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 10

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. 11

12 Font Size & Color There are twelve font size commands +6 through +1 and -1 through 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 12

13 Background To set the background color <body bgcolor="pink"> Or <body bgcolor="#ff69b4"> Color chart can be found here: 13

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 14

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> 15

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 16

17 Other Text Tags These tags do not require a closing tag. Tag Result <HR> <BR> This command gives you a line across the page. (HR stands for Horizontal Rule) 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. 17

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> 18

19 Making HyperLinks To link to other websites: <A HREF= >Google</A> You can make images into links: <A HREF= ><IMG SRC= image.jpg ></A> 19

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 20

21 Ordered List Ordered lists are numbered Code <b>my Morning Routine</b> <ol> <li>wake up</li> <li>shower</li> <li>eat breakfast</li> Result My Morning Routine 1. Wake up 2. Shower 3. Eat breakfast </ol> 21

22 Unordered List Code <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> Result Grocery List Eggs Butter Butter Flavoring Lemon Extract Sugar Flour </ul> 22

23 Helpful Links Learn more about Creating Websites: HTML Color Picker: Color Scheme Designer: Free Background Images: Free Microsoft Graphics: 23

Html basics Course Outline

Html basics Course Outline Description Learn the essential skills you will need to create your web pages with HTML. Topics include: adding text any hyperlinks, images and backgrounds, lists, tables, and