Transcript Web pages
Create a Website Session I Key Components Hands-on HTML Website Components Server – Domain Name – The store Provides the place where you can store your products and people can get them. The address People need this to find your store. Web pages – The layout Displaying your products the way you want. YOUR FILES Upload SERVER Internet Visitor Internet Visitor 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 – – 2. 3. 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. CSS, Cascading Style Sheets – A way to share control and layout of your entire site without changing every single page. 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 HTML 1. 2. Open notepad (Start > All programs > Accessories) Type: <html> <head> <title>Judy’s Page</title> </head> <body>This is my first homepage.<b>This text is bold</b> </body> </html> HTML Extension When working with HTML, always save as “filename.html” with .html at the end. Save the notepad file (NOT as *.txt) See Your HTML at Work 1. 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 Tags Every webpage should have this: HTML: <html></html> A webpage HEAD:<head></head> This should be at the beginning. TITLE: <title></title> This should start and end with this tag. 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: 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=“music.htm”>Library</a> <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.