1 / 16

HTML

HTML. The first word (initialism) in web design. Web Browsers. A Web Browser is a program on your computer that interprets information received from the Internet and translates it into a form that we understand. Some are better than others…. H yper T ext M arkup L anguage. HTML.

laken
Download Presentation

HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML The first word (initialism) in web design

  2. Web Browsers • A Web Browser is a program on your computer that interprets information received from the Internet and translates it into a form that we understand Some are better than others…

  3. HyperText Markup Language HTML • A “Programming Language” that we (humans) can read and write • We use it to “Mark Up” text in such a way that a “Browser” knows to display what we want • Based on “Elements” consisting of opening and closing “Tags”

  4. Open up Text Wrangler Type the following exactly as you see it <html> <h1>Hello World</h1> <p>This is a paragraph</p> </html> Save it onto the desktop with the title “index.html”. DO NOT CLOSE TEXT WRANGLER Open it and what do you see?

  5. That’s the Internet! Internet Explained

  6. Well Wasn’t That Neat? • Block Level vs. Inline • Block Level • Browser adds a white space between block level elements • Ex. <blockquote>, <p>, <h1> • Inline • Applied to content within a block level element • Ex. <strong>, <em>, <a>

  7. <head> Information Things you put in the <head> area, tell the browser information about the web page. Information about the page title or page style go in the <head> The <title> tag defines the title of the page in your browser Go ahead and give your page a title

  8. Attributes • Goes in the opening tag of an element • The syntax is ➡ name=“value” • “name” is the name of the attribute • “value” is what you want it to do (always goes in double quotes <a href=“http://giip.org”> Link </a> <h1 id=“sectiontitle”> Attributes</h1>

  9. Multiple Pages • Create a new .html file and name it “about.html” • Feel free to just copy all the code from index.html and paste it in • Just make sure to make one of the paragraphs say something about you like, “I am cool” • Save it and put it in your web folder • Go to “index.html” and add this to one of your paragraphs, • <a href=”about.html">Link text goes here</a>

  10. Link Back To Your First Page Now, in your “about” page, make a link back to your home page Who can guess how to do this?

  11. Images • You don’t want a website full of text do you? • To add images you use this code” • <imgsrc=“image url or file name” /> • Notice that it doesn’t need a closing tag • Change the size with the “width” and “height” attributes • <imgsrc=“giip.jpg” height=“75px” width=“75px” /> • Image as a link? • Just put the <img> element where the link text would go

  12. So You’ve Got A Sweet Website On Your Computer…Cool? • We need to get this bad boy on the web. To do that we need to upload it onto a “Server” so that anyone can access it • Open the application “Cyberduck” • You need to download this on your personal computer

  13. File Transfer Protocol (FTP) • FTP is an application that transfers files onto a “Server” • A Server is a specially formatted computer wherein files like webpages and images are stored

  14. Directories • A directory is a folder • Before it looked like, • file:///Users/tgelder/Desktop/thomas-gelder2/index.html • It shows the “File Path” • Now it’s on the web and looks different since it’s in a new “Directory” which is just a folder on the server • www.icanfafsa.com/weblab/thomas-gelder2 • I gave you guys access to the “weblab” directory

  15. Login Information • I have given you guys access to the directory “weblab” you all have free reign over this particular folder • DON’T SCREW WITH OTHER PEOPLE’S FILES • Server = icanfafsa.com • Username = weblab@icanfafsa.com • Password = 2012weblab

  16. Edit Right on the Server! • No need to download and re-upload whenever you want to make changes • 1st go to Cyberduck preferences and select Text Wrangler as your default editor • Select the file you want to edit and hit “Edit” up on the top right of the window. • Now you can just save your changes and it will immediatelyupdate your website!

More Related