1. HTML Basic IST2101

2. Keep In Mind Programming can be time consuming. Plan ahead!

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

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

5. Basic Tags Four Basic tags – HTML – Head – Title – Body 5IST210 Hello World Hello World!

6. Try it yourself Start Notepad or Notepad++ Create an HTML document with all four basic tags – HTML – HEAD – TITLE – BODY Save as an html document, e.g. HelloWorld.html – Remember to change “Save as type” to “All Files”. It will be saved as “.txt” by default. To display: Double click or open in a web browser Hello World Hello World! 6IST210

7. Place Your Page on Web Access your IST web space – Method 1: – Method 2: Direct access via UNC path: \\upws1.up.ist.local\Users\USERNAMEUNC path The URL for your web space is: http://my.up.ist.psu.edu/USERNAME/helloworld.html IST2107

8. HTML Tags: Format Format tags: – Container tags Affect whatever part of the document they contain – bold tag: text – italic tag: text texts – font tag: text – Singular tag Results in an action where the tag is located in the HTML – the horizontal line tag: – line break line tag: 8IST210

9. Try it yourself bold tag: text line break line tag: font tag: text Hello World Hello World! My name is Zihan. How are you?

10. HTML Tags: More Text Styles 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 10IST210

11. HTML Tags: Heading 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 11IST210

12. HTML Tags: More Fonts 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 12IST210 attributevalue

13. In-Class Exercise Use the tags and attributes in the previous slides to create the following page: This line in heading This line in green Use superscript

14. Document Attribute IST21014 Hello World Hello World! text

15. HTML Tags: Document Attributes Color names 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 15IST210

16. HTML Links In HTML, links are defined with the tag: Hello World Welcome to PSU!

17. HTML Images In HTML, images are defined with the tag. – The src attribute specifies the address (or URL) of the image: Hello World

18. HTML Tags: More… More tags: – http://www.w3schools.com/tags/default.asp 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” IST21018