html basic ist 210: organization of data ist210 1
TRANSCRIPT
![Page 1: HTML BASIC IST 210: Organization of Data IST210 1](https://reader035.vdocuments.net/reader035/viewer/2022062409/5697c01f1a28abf838cd1b00/html5/thumbnails/1.jpg)
IST210 1
HTML BASICIST 210: Organization of Data
![Page 2: HTML BASIC IST 210: Organization of Data IST210 1](https://reader035.vdocuments.net/reader035/viewer/2022062409/5697c01f1a28abf838cd1b00/html5/thumbnails/2.jpg)
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
![Page 3: HTML BASIC IST 210: Organization of Data IST210 1](https://reader035.vdocuments.net/reader035/viewer/2022062409/5697c01f1a28abf838cd1b00/html5/thumbnails/3.jpg)
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
![Page 4: HTML BASIC IST 210: Organization of Data IST210 1](https://reader035.vdocuments.net/reader035/viewer/2022062409/5697c01f1a28abf838cd1b00/html5/thumbnails/4.jpg)
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>
![Page 5: HTML BASIC IST 210: Organization of Data IST210 1](https://reader035.vdocuments.net/reader035/viewer/2022062409/5697c01f1a28abf838cd1b00/html5/thumbnails/5.jpg)
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
![Page 6: HTML BASIC IST 210: Organization of Data IST210 1](https://reader035.vdocuments.net/reader035/viewer/2022062409/5697c01f1a28abf838cd1b00/html5/thumbnails/6.jpg)
IST210 6
Create your first html – ready?
<html><head>
<title>Hello World</title>
</head>
</html>
Try it
![Page 7: HTML BASIC IST 210: Organization of Data IST210 1](https://reader035.vdocuments.net/reader035/viewer/2022062409/5697c01f1a28abf838cd1b00/html5/thumbnails/7.jpg)
IST210 7
Create your first html – ready?
<html><head>
<title>Hello World</title>
</head><body>
Hello World! </body>
</html>
Try it
![Page 8: HTML BASIC IST 210: Organization of Data IST210 1](https://reader035.vdocuments.net/reader035/viewer/2022062409/5697c01f1a28abf838cd1b00/html5/thumbnails/8.jpg)
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
![Page 9: HTML BASIC IST 210: Organization of Data IST210 1](https://reader035.vdocuments.net/reader035/viewer/2022062409/5697c01f1a28abf838cd1b00/html5/thumbnails/9.jpg)
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
![Page 10: HTML BASIC IST 210: Organization of Data IST210 1](https://reader035.vdocuments.net/reader035/viewer/2022062409/5697c01f1a28abf838cd1b00/html5/thumbnails/10.jpg)
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
![Page 11: HTML BASIC IST 210: Organization of Data IST210 1](https://reader035.vdocuments.net/reader035/viewer/2022062409/5697c01f1a28abf838cd1b00/html5/thumbnails/11.jpg)
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
![Page 12: HTML BASIC IST 210: Organization of Data IST210 1](https://reader035.vdocuments.net/reader035/viewer/2022062409/5697c01f1a28abf838cd1b00/html5/thumbnails/12.jpg)
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
![Page 13: HTML BASIC IST 210: Organization of Data IST210 1](https://reader035.vdocuments.net/reader035/viewer/2022062409/5697c01f1a28abf838cd1b00/html5/thumbnails/13.jpg)
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>
![Page 14: HTML BASIC IST 210: Organization of Data IST210 1](https://reader035.vdocuments.net/reader035/viewer/2022062409/5697c01f1a28abf838cd1b00/html5/thumbnails/14.jpg)
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
![Page 15: HTML BASIC IST 210: Organization of Data IST210 1](https://reader035.vdocuments.net/reader035/viewer/2022062409/5697c01f1a28abf838cd1b00/html5/thumbnails/15.jpg)
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
![Page 16: HTML BASIC IST 210: Organization of Data IST210 1](https://reader035.vdocuments.net/reader035/viewer/2022062409/5697c01f1a28abf838cd1b00/html5/thumbnails/16.jpg)
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?
![Page 17: HTML BASIC IST 210: Organization of Data IST210 1](https://reader035.vdocuments.net/reader035/viewer/2022062409/5697c01f1a28abf838cd1b00/html5/thumbnails/17.jpg)
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!
![Page 18: HTML BASIC IST 210: Organization of Data IST210 1](https://reader035.vdocuments.net/reader035/viewer/2022062409/5697c01f1a28abf838cd1b00/html5/thumbnails/18.jpg)
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
![Page 19: HTML BASIC IST 210: Organization of Data IST210 1](https://reader035.vdocuments.net/reader035/viewer/2022062409/5697c01f1a28abf838cd1b00/html5/thumbnails/19.jpg)
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?
![Page 20: HTML BASIC IST 210: Organization of Data IST210 1](https://reader035.vdocuments.net/reader035/viewer/2022062409/5697c01f1a28abf838cd1b00/html5/thumbnails/20.jpg)
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?
![Page 21: HTML BASIC IST 210: Organization of Data IST210 1](https://reader035.vdocuments.net/reader035/viewer/2022062409/5697c01f1a28abf838cd1b00/html5/thumbnails/21.jpg)
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">
![Page 22: HTML BASIC IST 210: Organization of Data IST210 1](https://reader035.vdocuments.net/reader035/viewer/2022062409/5697c01f1a28abf838cd1b00/html5/thumbnails/22.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”
![Page 23: HTML BASIC IST 210: Organization of Data IST210 1](https://reader035.vdocuments.net/reader035/viewer/2022062409/5697c01f1a28abf838cd1b00/html5/thumbnails/23.jpg)
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