HTML Basic IST 210: Organization of Data IST2101

HTML: Hyper Text Markup Language An HTML document is a text file (script) A web browser (IE, Firefox, Opera, etc.) interprets the script and presents appropriate contents 2IST210

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 3IST210

Basics HTML Head Title Body IST2104 Hello World Hello World!

Try it Yourself IST2105 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

IST2106 Hello World Hello World! This is a new line break line Try it

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

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 8IST210

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

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 Regular size=2 size=+2 size=-2 Arial Green Red 10IST210

Heading IST21011 Hello World Hello World! Penn State College of IST text Try it

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

Document Attribute IST21013 Hello World Hello World! text Try it

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). Background image 14IST210

HTML Tags: More… More tags: – 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” IST21015

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 IST21016 Try it