Embed Size (px)
Citation preview
Create a WebsiteSession I
Key ComponentsHands-on HTML
Website Components
Server– The store Provides the place where you can
store your products and people can get them. Domain Name
– The address People need this to find your store.
Web pages– The layout Displaying your products the way
you want.
InternetVisitor Internet
Visitor
YOURFILES
SERVER
2. Downloading
web pages
1. Using th
e domain
name to fin
d
the server
Upload
The Server
A computer for your files (pictures, text, web pages, music, etc).
“Upload to the server” Put your files into the server.
“Download from the server” Retrieve a file that is already on the server.– Every time you see a website, everything you see
was downloaded from a server to your browser.
Server & Host Specifications
FTP: File Transfer Protocol– To transfer a lot of files at once, you’ll need FTP, it helps you access the
files in a server. Bandwidth Transfer Limit
– How much of your site can be seen? What happens when a lot of people visit?
Disk Space/Storage– How much can you upload to the server?
Subdomains = books.google.com, scholar.google.com Webmail = Check your email on the web, ie. [email protected] Specifications (important depending on the programs you want to install)
– Apache vs. IIS (Server Type)– PHP vs. ASP, etc. (Programming Language)– mySQL vs. SQL (Database Type)
http://www.bluehost.com/tell_me_more.html http://www.hostgator.com/shared.shtml http://www.fortunecity.com/compare-hosting-plans.shtml
Domain Name
www.DomainName.com, www.DomainName.edu, www.DomainName.net, etc…
http://www.google.com: Google.com is the domain name.
http://www.uwest.edu/site/page.html: UWest.edu is the domain name (the rest are just folders and files. ‘site’ is a folder, page.html is the web page file)
You need to ‘rent’ this name by registering for it, usually on a year by year basis.
Vendors: godaddy.com,networksolutions.com
Domain Specifications
General rules of thumb:– .com = commercial– .edu = educational institution– .net = anything goes.– .org = non-profit organization
You can purchase a domain first, without buying hosting service. Or you can purchase it as a package. Many hosting companies offer the package.
You will have to direct this domain to the IP address provided by your host.
It could take up to 24-48 hours to ‘resolve’: to have all computers online associate the domain name with the host that has your files.
http://www.godaddy.com
Web Pages
1. HTML, HyperText Markup Language– Tells your internet browser what to do, where to get
pictures, where to display the links: layout and text.– Open your Internet browser, go to any website, right click
anywhere on the website and select “View Source” to see that page’s HTML code.
2. CSS, Cascading Style Sheets– A way to share control and layout of your entire site without changing
every single page.
3. Javascript– Small functions that detects input from the internet user.
Web Design Specifications
HTML Editors:– WYSIWYG = What you see is what you get, no need to use
HTML, drag and drop, start typing words. Dreamweaver*, Frontpage*, Microsoft Word (Save As…HTML)
– HTML Code Editors = Notepad with helper functions, i.e. Color coded, indents, shortcuts.
Textpad, Araneae
*Has both WYSIWYG and HTML code editor.
• How to choose: http://webdesign.about.com/library/editorquiz/blstart.htm
Summary
To setup a website:– Find a hosting service, make sure the
specifications are what you need.– Decide on a domain name, make sure it’s not
already taken.– Use a web editor (and a graphics application) to
design your website and upload your files.– Update as necessary.
Basic HTML If you use a WYSIWYG editor, you might will not be working directly
with HTML, but you should know how it is done. Remember all HTML need an OPENING tag and a CLOSING tag.
<html></html>, <body></body>, or self-closing tags <img src=“” />
No frills resource on learning HTML: http://www.w3schools.com/html/default.asp
You should try to go through the entire series on the website. You should also try to go through the CSS tutorial:
http://www.w3schools.com/css/ How do you know your HTML is correct? Validator:
http://validator.w3.org/
Hands On HTML1. Open notepad (Start > All programs > Accessories)2. Type:
<html><head>
<title>Judy’s Page</title> </head> <body>This is my first homepage.<b>This text
is bold</b> </body>
</html>
HTML ExtensionWhen working with HTML, always save as
“filename.html” with .html at the end.
Save the notepad file (NOT as *.txt)
See Your HTML at Work1. Double click on the file (*.html is associated with Internet
Explorer, like *.doc opens up Microsoft Word)
2. It renders the HTML code into this:
This is the text between:<title></title>
This is all in the <body></body>
This was the text between the <b></b> tags.
Note: You do not have to be connected to the Internet to design a web page, because your computer is now acting like to a server. However, you can’t send this URL address to others for them to check, because it’s for your computer only.
Essential TagsEvery webpage should have this:
HTML: <html></html>A webpage should start and end with this tag.
HEAD:<head></head>This should be at the beginning.
TITLE: <title></title>This should be between the HEAD tags.
BODY: <body></body>All text, graphics, tables, anything that the Internet
user physically sees on the browser should be between the BODY tags.
Element Tags BOLD: <b></b> ITALICS: <i></i> Images: <img src=“URL” width=“” height=“”
alt=“” />The width and height is by pixels, you can find them
by right clicking on the picture and selecting ‘properties’.
Linking: <a href=“URL”>The text to click on</a> Headings: <h1></h1>, <h2></h2>, etc. Paragraph: <p></p> Line breaks: <br /> Division/Section (html 4.01 +): <div></div>
Paths: For Linking & Images Relative vs. Absolute
Guide: http://www.webdiner.com/webadv/begin/paths.htm
Relative Path The address relative to where your current file is (this
means music.htm is in the same folder as the file you are looking at:
<a href=“music.htm”>Library</a> When you tell someone another address in Rosemead, do
you still tell them it’s in California, USA? Absolute Path
The ENTIRE Address, as much as needed: <a href=http://www.musicdomain.com/music.htm></a>
1409 Walnut Grove Ave, Rosemead, CA 91770, USA Which is better to use?
Webpages OUTSIDE of your domain should always be in absolute path.
Webpages inside your domain, try to use relative. If you change your domain name, or the file structure, you don’t have to change ALL the paths.
Research For HTML Programming and coding is not
memorization. It’s looking it up online when you don’t know:
http://www.w3schools.com http://www.w3.org/MarkUp/Guide/
It’s using it so often that you know it by heart. It’s creating a template of basic HTML and
making necessary changes. It’s looking at other people’s code, and seeing
how they do it.
Your Homework (Optional) Design a basic HTML web page with the
following 4 HTML elements:A picture (use this URL: http://library.uwest.edu/workshop/workshop.jpg)
A bolded line of text.An italic line of text.A table with one row and 3 columns, with a
border size of 1. We did not go over TABLES in this workshop. Do
research on how to code tables in HTML.
Your HW should look something like this, send the file to [email protected] for review.
