1. HTML BASIC IST 210: Organization of Data IST210 1

2. HTML: Hyper Text Markup Language Hypertext means "text with links in it." Any time you click on a word that brings you to a new webpage, you've clicked on hypertext! A markup language is a programming language used to make text do more than just sit on a page: it can turn text into images, links, tables, lists, and much more. HTML is the markup language we'll be learning An HTML document is a text file (script) A web browser (Safari, Chrome, IE, Firefox, Opera, etc.) interprets the script and presents appropriate contents IST210 2

3. Tags in HTML Tags are mainly used to indicate what data is about and for some types of data, how to display it Document properties Layout Text style Images Hyper-links IST210 3

4. Basics HTML Head Title Body IST210 4 Hello World Hello World!

5. Try it Yourself Step 1. Start NotePad++ Type “notepad++” in Start search bar Step 2. Write the html code in notepad and save it to helloworld.html No space or special characters in the name of the file. For example, don’t name as hello world.html Space in the name will cause trouble in visiting the page Remember to change “Save as type” to “All Files”. It will be saved as “.txt” by default. Step 3. Go to the folder you saved the file, click helloworld.html IST210 5

6. Create your first html – ready? IST210 6 Hello World Try it

7. Create your first html – ready? IST210 7 Hello World Hello World! Try it

8. Create your first html – ready? IST210 8 Hello World Hello World! Try it Change this to YOUR NAME

9. IST210 9 Hello World Hello World! This is a new line break line Try it

10. Text Styles: bold tag text italic tag text IST210 10 Hello World Hello World! My name is Christ. How are you? They come in pairs!!! What if you forgot backslash tag ? Try it

11. Text Styles: More Regular bold Regular big Regular emphasized Regular italic Regular small Regular strong Regular subscripted Regular superscripted Regular inserted Regular deleted You are NOT required to remember all of them IST210 11

12. Fonts IST210 12 Hello World Hello World! I like red color ! I like Arial font ! I like arial font in red color! Text attributevalue Try it

13. Fonts: More Font is defined by tag, with the following attributes: size="number" size="2" Defines the font size size="+number" size="+1" Increases the font size size="-number" size="-1" Decreases the font size face="face-name" face="Times" Defines the font-name color="color-value" color="#FFFFFF" Defines the font color color="color-name" color="red" Defines the font color IST210 13 Regular size=2 size=+2 size=-2 Arial Green Red

14. Heading: More Heading tags: to, where is the largest. A blank line is added before/after the heading. IST210 14 Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Regular text

15. Heading IST210 15 Hello World Hello World! Penn State College of IST text Try it

16. Heading IST210 16 Hello World Hello World! Penn State College of IST text How to change it?

17. Heading IST210 17 Hello World Hello World! Penn State College of IST text Try it!

18. Document Attribute IST210 18 Hello World Hello World! text Try it

19. Document Attribute IST210 19 Hello World Hello World! text What about change Background to yellow?

20. Document Attribute IST210 20 Hello World Hello World! text What about change Background to yellow?

21. Document Attribute: More Background color RGB colors HTML colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (hex #00). The highest value is 255 (hex #FF). http://www.w3schools.com/HTML/html_colornames.asp Background image IST210 21

22. HTML Tags: More… More tags: http://www.w3schools.com/tags/default.asp HTML is not case sensitive, but lower case tags are suggested “Coding” in HTML is not as strict as in programming languages You can use html or htm as file extension Try view page source on any webpage On a webpage, right click, click on “View Source” IST210 22

23. Place Your Page on Web Step 1. Go to your webspace folder Open any folder. On the left-hand side, expand Computer, click on “IST UP Webspace”. Step 2. Place your helloWorld.html in the webspace folder Step 3. Open a browser, visit my.up.ist.psu.edu/YourPSUID/helloWorld.html IST210 23 Try it