Hypertext Markup Language (HTML) Created by Sarah Dooley & Amanda Foster Edited and presented by Caroline Hallam September 9, 2014

Overview  Today: HTML SFTP & isis web space  Coming Up: Improve the Look of Your Web Page with CSS, September 16, 7-8 PM Advanced HTML & CSS, September 23, 7-8PM

What is HTML?  HTML stands for HyperText Markup Language Hypertext: linking to content Markup language: defining the structure  Paired with CSS, to define how this structure is displayed  Web browsers read this markup language (HTML and CSS) and interpret the instructions given to display the webpage

The Homepage  index.html is the default file name for the homepage/main directory of any website  When you visit a site like lib.unc.edu, the web server looks within the directory for the default file to display even if you don’t type out the full file namelib.unc.edu  Without this page, users will either see a directory listing of your website files or an error page (Read more here)Read more here

How to name files  As always think about your users when naming files since they’ll have to type in your URLs KISS principle = Keep it simple, stupid!  Use lowercase letters  Do not use spaces, instead use underscores (_) or dashes (-) to represent spaces  Use the proper extension such as.html or.css

Using HTML to Create Web Content

Tags  HTML uses tags to mark up content  Each tag (usually!) has an opening tag…  …and a closing tag

Document Structure My first page My First Heading My first paragraph.  An HTML document has a head and a body The head provides information about the document The body is where the document’s content goes

Document structure

Document Structure  The DOCTYPE declaration defines the document typeDOCTYPE declaration  The text between and describes the web page  The text between and is the visible page content  The text between and is displayed as a heading  The text between and is displayed as a paragraph

Common Tags, Part 1 Heading1 Heading2 Heading3 Heading4 Heading5 Heading6 This is first paragraph This is second paragraph Try it out!

Common Tags, Part 2 Example: Home My Research Experiments Home My Research Experiments = Unordered list (bulleted) = Ordered list (numbered) = List element Try it out!

Attributes  You can add more information to your tags with attributes. This is a link  An attribute consists of a name and a value. Tag: a Attribute Name: href Value:  Format: use quotation marks around the value. Use lowercase letters for the whole tag

Common Tags, Part 3 This is a link! I want a break after this linebreak

Adding Images  Place all images in a folder within your website folder titled “images”  Example:  Every image you include on your website should include attributes for: Source Alternative Display Name (Can also include width and height)

Nesting tags  Sometimes you’ll have one set of tags inside another: paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph. Oh wait, I want a link here ! paragraph paragraph paragraph  If so, close the tags in the reverse of the order you opened them Word< ?

Inline vs. Block  A block element: “takes up the full width available, and has a line break before and after it”* Block elements include through,, and  An inline element: “only takes up as much width as necessary, and does not force line breaks”* Inline elements include,, and  Note: Inline elements should be placed within block elements, not vice versa *from

Linking Between Pages  Linking between pages is similar to linking to external websites. Linking to a website: Google Linking between pages: Instructors

Other Cool Stuff HTML Can Do  Tables Tables  Forms – Great for quizzes! Forms

Putting Your Pages on the Web

SFTP Software  SFTP stands for “Secure File Transfer Protocol”  Used to copy a file from your computer to a server  In our case, this server is called “isis” and it hosts your personal UNC web space  UNC provides free SFTP Clients to get files from your computer to your isis serverSFTP Clients PC: Secure Shell Mac: Fetch or FuguFugu

Finishing up  HTML resources  UL Design Lab for design assistance  Future skillfUL sessions Improve the Look of Your Web Page with CSS, September 16, 7-8 PM Advanced HTML & CSS, September 23, 7- 8PM  Feedback