HTML Basic I IST2101

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

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

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

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

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

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

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

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

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

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 11IST210 attributevalue

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