HTML Basic 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

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

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

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

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

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

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

Document Attribute IST21014 Hello World Hello World! text

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

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

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

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” IST21018