1. HTML Basics An Introduction to HTML

2. What is HTML? Stands for “Hyper Text Markup Language” Composed of “tags” which are surrounded by sideways triangles  Usually occur in Pairs:  … Many different types of tags

3. Where to start? Our HTML will be in Notepad This can be accessed by: –Start button –Accessories –Note pad Saved as “______.htm”, not the default “______.txt”

4. Document Tags First tag always has to be the HTML tag (since we are writing in HTML) It looks like this: – The tag with the slash will appear at the end of the page, since all of the html code will be in between

5. Document Tags Cont. Headers and titles: Shown by … and … For example – Ms. Mattatall’s Page would be seen like the following:

6. HTML version vs. Saved Version

7. Body Tags Body is the main part of the webpage, aside from the title. Like this section of text Start with End with

8. Body Example

9. How come it didn’t work? Paragraph Tags Not a “paired” tag Each new paragraph, insert

10. Paragraph Tag Example

11. Basic Text Structures New Headings (different from earlier) Same as the six different sizes of fonts: range from 1-6 –1 = biggest –6 = smallest

12. Heading Examples

13. A bit more about headings Why no between lines? Meant to be “section headers” No need for the

14. Unordered Lists (not numbered) Starts with (for “unordered list”) Then list the objects: – Monday – Tuesday – Wednesday – Thursday – Friday – Saturday – Sunday End with

15. List Examples

16. Ordered List (same as a numbered list) Same as Unordered list No bullets, goes with numbers Starts with Ends with

17. Ordered List Example

18. Some Easier Tags Bold: … Italicize: … Underline: … Horizontal Rule (a line that goes across the screen, like a divider) (an empty tag, doesn’t need the one at the end)

19. Bold/Italicize/Underline Examples (notice the between the names to create the new paragraph)

20. Hyperlinks How you transfer people from one webpage to another Referred to as a “hypertext reference” Seen as “a href” Website needs to be in quotations Need the “http://”

21. Hyperlinks Cont. Makes words into a link Instead of seeing the webpage address, you see “click here” or other words Shown as: Dartmouth High Website

22. Hypertext Reference Example (hyperlink)

23. Putting in an Image This is done through the internet Uses the “internet source” or the “image source” Tag : To find the source of the image, right click on the picture, then go to “picture properties”

24. Image example

25. Some Other Easy Tags To center your words on the page: … To change font size: (enter a number from 1-7) To make your font blink (careful this can be very annoying!) …

26. Changing Colours Not as simple as typing the colour Need the colour code: found here http://html-color-codes.com/ or http://www.htmlgoodies.com/tutorials/c olors/article.php/3478961http://html-color-codes.com/ Change font by This needs to go at the top of the page before your text if you want it all to be that colour Sometimes you can try with simple colours but it does not work for all

27. Changing Background Colour At the top of the page, after the and tags, you can enter

28. Changing the Font Use whatever font you prefer, but your computer has to support that font for you to see it Make sure you use the quotations!!

29. More Tags You can find more html tags by searching the internet These are just simple ones meant to guide you along to making a simple web page Search for “html tags” on the internet to learn more

30. Assignment #1 - Walkthrough 1.Open up “notepad” Start button Accessories Notepad 2.Save in your WWW folder in the H drive as –Assignment1.html –MAKE SURE YOU DO THE.HTML part

31. Assignment #1 Cont. Write at the top Press enter 4 times Write Go up top, click file then “save”

32. Assignment #1 Cont. Everyone should see this:

33. Assignment #1 Cont. Underneath the first tag, insert Press enter Write your name (First, Middle, and Last)

34. Assignment #1 Cont. Now you should see this:

35. Assignment #1 Cont. After your name, press enter Create a Horizontal Rule (A horizontal line that goes across the screen) Write on the next line Press enter Now we are making the Body text Type on the next line GO down to where the is (at the bottom). On the line above it, type

36. Assignment #1 Cont. You should see this on your screen

37. Assignment #1 Cont. Between the two body tags, press enter a few times. This does NOTHING to your page, just helps you keep organized. Make your text centered: type below the body tag, then press enter again. Enter the following: Dartmouth High School Press Enter

38. Assignment #1 Cont. Now you should see this:

39. Assignment #1 Cont. Underneath Dartmouth high school, we will make your name a different color, make it scroll across the screen, make it bold, and make it italicized. Sounds hard but it’s not. Follow closely.

40. Assignment #1 Cont. Under dartmouth high school, place the following. Make sure you press enter after each. – (to create a new paragraph) – –Enter your name again here. (full name) – (To end the scrolling)

41. Now your screen should look like this

42. Assignment #1 Cont. Go to “file” then “save” Minimize the screen Open your H: drive in the WWW folder You will see “assignment1.html” saved Open it up (it will open as a webpage)

43. Assignment #1 Cont. Now your webpage should look like this: (the name in red will move across the screen