itp 101 introduction to information technologytrinagre/itp101/lectures/itp101_html.pdffollowed by a...
TRANSCRIPT
ITP 101 Introduction to Information Technology
Overview • HTML • Editors • CSS • HTML5 • Hosting
2
Graphic representation of a minute fraction of the WWW, demonstrating hyperlinks
HTML • Web servers store and serve web pages • Web browsers retrieve pages and render their content based
on the HTML and CSS • HyperText Markup Language is the main markup language for
web pages • Consists of 2 components
– Text • Content of the page
– Tags • Instructions for how to format and display web pages • Surrounded by < and > • Examples
– Format text in certain styles and colors – Insert media such as images, sounds, videos, Flash, etc. – Create divisions and containers in the page – Administrative details of the page including scripting
• Tags have attributes
3
Skeleton for All HTML Files
4
<html> <head> <title>Title of Page</title> </head> <body> ----------------------------- Contents of HTML page ----------------------------- </body> </html>
tag
text
HTML • Using HTML, we mark up content with tags to provide structure • We call matching tags, and their enclosed content, elements
– An element is composed of three parts: an opening tag, content and a closing tag
– There are a few elements, like <img>, that are an exception to this rule – Opening tags can have attributes
• Attributes give you a way to provide additional information about an element – Closing tags have a / after the left angle bracket, in front of the tag
name to distinguish them as closing tags • Your pages should always have an <html> element along with a
<head> element and a <body> element – Information about the web page goes into the <head> element – What you put into the <body> element is what you see in the browser
5
HTML Tag Examples • Opening and Closing Tags
<p>Ernest Hemingway</p> <em>The Sun Also Rises</em>
• Self-Closing Tags
<img src=“image.jpg” /> <br /> <hr />
HTML Example
7
<html> <head> <title>Fox and Dog</title> </head> <body> The <i>quick</i> brown <b>fox</b> jumped over the <a href="http://www.lazydogclub.com/">lazy dog</a>. </body> </html>
Code
Web Browser
HTML Code • You can view the HTML code for any web page. • Safari
– On the menu bar, click on View View Source – Right click on mouse, and select View Source
• Firefox – On the menu bar, click on View Page Source – Right click on mouse, and select View Page Source
• Internet Explorer – On the menu bar, click on View Source – Right click on mouse, and select View Page Source
• Most whitespace (tabs, returns, spaces) are ignored by the browser, but you can use these to make your HTML more readable (to you)
8
HTML Editors – Text
9
• You can create HTML pages in a text editor
• Examples: – Notepad on
Windows – Komodo Edit on Mac
OS
HTML Editors – WYSIWYG • WYSIWYG = What You See Is What You Get
10
• Example: Adobe
Dreamweaver
Modern Web Sites
11
Tags • Element = Opening Tag + Content + Closing Tag • Some tags are block elements
– Displayed as if they have a linebreak before and after them – Examples are <h1> ... <h6>, <p>, and <blockquote>
• Other tags are inline elements – Appear in line within the flow of the text in your page – Examples are <b>, <q>, and <a>
• Elements that don't have any HTML content by design are called empty elements – Examples are <br>, <img>, and <hr> – To be HTML compliant, put / before > such as <br />
12
Tags • Logical styles define how the affected text is to be
used on the page – The browser decides how to display the text – Examples: <code>, <em>, <h1>, and <strong>
• Physical styles define how to display the affected text – For the most part, these styles display the same,
regardless of the browser type – Examples: <b>, <i>, <sub>, and <sup>
• http://bcf.usc.edu/~trinagre/itp101/lectures/Tags.html
13
Comments and Special Characters • Comments
– Will not be displayed in the browser – Use <!-- before your comments and --> to end it – Your comments can span multiple lines
• Special Characters
14
<!-- This is a comment in HTML code -->
Character Named Entity (nonbreaking space)
& &
© ©
® ®
< <
> >
Links • The Web got its spidery name from the plentiful
connections between web sites • These connections are made using anchor tags to
create links • Use the <a> element
– The href attribute specifies the destination of the link – The content (between <a> and </a>) is the label for the
link • By default, it's underlined (and usually blue) to indicate you
can click on it • You can use words or an image as the label for a link
15
Hypertext References • Internal – links to anchors on the current page
– Use the id attribute to create a destination anchor in a page – Use # followed by a destination anchor id to link to that location
in a page • Local – links to other pages within your domain
– A relative path is a link that points to other files on your website relative to the web page you are linking from
– Use .. to link to a file that is one folder above (or parent folder) the file you are linking from
• Global – links to other domains outside of your site – Absolute links are those that include the entire pathname (URL)
16
Guide to Better Links • Keep your link labels concise
– Use few words or an image • Keep your link labels meaningful
– Never use link labels like click here or this page – Test your page by reading just the links on it
• Do they make sense? • Or do you need to read the text around them?
• Avoid placing links right next to each other
• http://bcf.usc.edu/~trinagre/itp101/lectures/Links.html
17
Images • Use the <img> element to place images in
your web page – The src attribute is how you specify the
location of the image file • You can include images from
– Your own site using a relative path – Other sites using an absolute path
• http://bcf.usc.edu/~trinagre/itp101/lectures/Images.html
18
CSS • CSS = Cascading Style Sheets
– Control the presentation of your HTML – The purpose is to separate the style of a web page from its content – Styles have rules and properties
• Example – CSS Zen Garden – http://www.csszengarden.com/
• 3 ways to include styles – Inline – styles are embedded right within the HTML code they affect – Internal – put the <style> element in the header of the page inside the <head> element
– External – contained in its own text file (ending in .css) using the <link> element in the <head> element
• http://bcf.usc.edu/~trinagre/itp101/lectures/Styles.html
19
Colors • You can specify colors in several ways:
– color name • W3C has listed 17 valid color names for HTML & CSS • Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy,
Olive, Orange, Purple, Red, Silver, Teal, , Yellow – rgb value using decimal values from 0 to 255 OR percentage
from 0 to 100% • rgb (0, 255, 0) • rgb (0, 100%, 0)
– hexadecimal (hex) value such as #00FF00 • The combination of RGB values gives more than 16 million
different colors • http://bcf.usc.edu/~trinagre/itp101/lectures/Colors.html
20
Hexadecimal Colors • Examples
Red Green Blue Hex value Red FF 0 0 #FF0000
Green 0 FF 0 #00FF00
Blue 0 0 FF #0000FF
FF FF FF #FFFFFF
Black 0 0 0 #000000
Cyan 0 FF FF #00FFFF
Yellow FF FF 0 #FFFF00
Magenta FF 0 FF #FF00FF
Fonts • Customize by changing the color, font-family, font-weight, etc. • Fonts are divided into “Font Families”
– cursive, fantasy, monospace, sans-serif, and serif – The serif family includes type with serifs
• Serifs are semi-structural details on the ends of some of the strokes that make up letters and symbols
• Used in newspaper print, since serifs help one's eye move along a sentence
– The sans-serif family include type without serifs • From the French sans, meaning “without” • Usually more readable on computer screens
– Monospace fonts have a constant character width
• Can also use font names – Examples - Arial, Courier New, Times New Roman
• http://bcf.usc.edu/~trinagre/itp101/lectures/Fonts.html
22
Common Fonts
HTML5 • Fifth revision of the HTML standard
– HTML4 was standardized in 1997 – XHTML 1.0 in 2000 and XHTML 1.1 in 2001
• W3C and WHATWG are working together – W3C = World Wide Web Consortium
• http://dev.w3.org/html5/spec/ – WHATWG = Web Hypertext Application Technology Working Group
• http://www.whatwg.org/
• Many features of HTML5 have been built with the consideration of being able to run on low-powered devices such as smartphones and tablets
• Changes in the markup – Semantic changes such as adding <nav> and <footer> and using <audio> and <video> instead of <object>
– Deprecated tags have been dropped such as <font> and <color>
25
HTML5 APIs • Specifies scripting APIs
– HTML5 alone cannot provide animation within web pages – Either JavaScript or CSS3 is necessary for animating HTML
elements
26
Web Hosting • Many companies provide web hosting
– Find one that meets your needs – All of them have access to the same domain names – http://bcf.usc.edu/~trinagre/itp101/lectures/WebHosting.html
• Examples: – bluehost – http://www.bluehost.com – hostmonster – http://www.hostmonster.com – GoDaddy.com – http://www.godaddy.com
• Shopping Carts – http://bcf.usc.edu/~trinagre/itp101/lectures/ShoppingCarts.html
27
Creating Web Pages • You will create web pages on your local machine
– HTML files (.html, .htm) – Image files (.png, .jpg, .jpeg, .gif) – CSS files (.css)
• Need to put the files on a web server – USC – web server for students is aludra
• To transfer files to the web server, use a FTP (File Transfer Protocol) program – Windows – FileZilla – Mac OS – Fetch, Cyberduck – Get free software at http://software.usc.edu – Web Space – http://bcf.usc.edu/~trinagre/itp101/WebSpace.html
28
Important Info • In an URL if you do not specify a file, the
web server will look for a file name index.html – This will be your main page for your website
• On the web server, you need to put the files for your website (html pages, css files, images, etc.) in a folder named public_html
29
Setting Up Your Student Account • Log into aludra using an FTP client
– FileZilla on Windows – FileZilla, Fetch, or Cyberduck on Mac
• Create a folder called public_html • In the public_html folder, create a folder called
itp101 – All of your HTML and CSS files will go into this folder – Your main page will be called index.html
• In the public_html/itp101 folder, create a folder called images – All of your image files will go into this folder
30
Web Technologies • Web Technologies Minor
– Patrick Dent, [email protected] • Classes
– ITP 104 – Web Publishing – ITP 300 – Database Web Development – ITP 301 – Interactive Web Development – ITP 310 – Design for User Experience – ITP 404 – Developing Web Services APIs – ITP 411 – Interactive Multimedia Production – ITP 460 – Web Application Project
• Careers – Web Designer - $55,838 - $69,434, hotjobs.yahoo.com – UI Developer - $87,000, www.indeed.com – Web Developer - $74,000, www.indeed.com – Senior Web Developer - $89,000, www.indeed.com – Web Designer Developer - $75,000, www.indeed.com
31