Post on 19-Jan-2016
IST210 1
HTML BASICIST 210: Organization of Data
IST210 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 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 4
Basics• HTML <html></html>• Head <head></head>• Title <title></title>• Body <body></body>
<html><head>
<title>Hello World</title>
</head><body>
Hello World!</body>
</html>
IST210 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 6
Create your first html – ready?
<html><head>
<title>Hello World</title>
</head>
</html>
Try it
IST210 7
Create your first html – ready?
<html><head>
<title>Hello World</title>
</head><body>
Hello World! </body>
</html>
Try it
IST210 8
Create your first html – ready?
<html><head>
<title>Hello World</title>
</head><body>
Hello World! </body>
</html>
Try it
Change this to YOUR NAME
IST210 9
<br>
<html><head>
<title>Hello World</title>
</head><body>
Hello World! <br>This is a new line
</body></html>
<br> break line
Try it
IST210 10
Text Styles: <b> <i>• bold tag <b> text </b>• italic tag <i> text </i>
<html><head>
<title>Hello World</title></head><body>
Hello World! <br>My name is <b> Christ
</b>. <br><i> How are you? </i>
</body></html>
They come in pairs!!!What if you forgot backslash tag </b>?
Try it
IST210 11
Text Styles: More
Regular <b> bold </b><br>
Regular <big> big </big><br>
Regular <em> emphasized </em><br>
Regular <i> italic </i><br>
Regular <small> small </small><br>
Regular <strong> strong </strong><br>
Regular <sub> subscripted </sub><br>
Regular <sup> superscripted </sup><br>
Regular <ins> inserted </ins><br>
Regular <del> deleted </del><br>
• You are NOT required to remember all of them
IST210 12
Fonts
<html><head>
<title>Hello World</title></head><body>
Hello World! <br>I like <font color="red"> red color </font>! <br>I like <font face="Arial"> Arial font </font>! <br>I like <font color="red" face="Arial"> arial font in red
color! </font></body>
</html>
<font color=“red"> Text </font><font face=“Arial”> Text </font><font color=“red” face=“Arial”> Text </font>
attribute value
Try it
IST210 13
Fonts: More• Font is defined by <font> 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<br><font size="2">size=2</font><br><font size="+2">size=+2</font><br><font size="-2">size=-2</font><br><font face="Arial">Arial</font><br><font color="#00FF00">Green</font><br><font color="red">Red</font><br>
IST210 14
Heading: More
• Heading tags: <h1> to <h6>, where <h1> is the largest.
• A blank line is added before/after the heading.
<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6>Regular text
IST210 15
Heading
<html><head>
<title>Hello World</title>
</head><body>
Hello World! <br><h1> Penn State
</h1><h2> College of
IST </h2></body>
</html>
<h1> text </h1><h2> text </h2>
Try it
IST210 16
Heading
<html><head>
<title>Hello World</title>
</head><body>
Hello World! <br><h1> Penn State
</h1><h2> College of
IST </h2></body>
</html>
<h1> text </h1><h2> text </h2>
How to change it?
IST210 17
Heading
<html><head>
<title>Hello World</title></head><body>
Hello World! <br><h1><font color="red"> Penn State
</font></h1><h2> College of IST </h2>
</body></html>
<h1> text </h1><h2> text </h2> Try it!
IST210 18
Document Attribute
<html><head>
<title>Hello World</title></head><body bgcolor="black">
<font color="white"> Hello World! </font>
</body></html>
<body bgcolor="black"> text
</body>
Try it
IST210 19
Document Attribute
<html><head>
<title>Hello World</title></head><body bgcolor="black">
<font color="white"> Hello World! </font>
</body></html>
<body bgcolor="black"> text
</body>
What about changeBackground to yellow?
IST210 20
Document Attribute
<html><head>
<title>Hello World</title></head><body bgcolor=”yellow">
<font color="white"> Hello World! </font>
</body></html>
<body bgcolor="black"> text
</body>
What about changeBackground to yellow?
IST210 21
Document Attribute: More
• Background color• <body bgcolor="#000000">• <body bgcolor="rgb(0,0,0)">• <body bgcolor="black">
• 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• <body background=“book.jpg">
IST210 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 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
Try it