Introduction HTML CSS Layout Outline 1 Introduction Web Site Workshop 2 HTML Header Body Tracy Stepien 3 CSS [email protected] Colors http://www.pitt.edu/~tls52/ Text and Fonts Links and Lists University of Pittsburgh Student Chapter of SIAM Box Model March 24, 2012 4 Layout Grouping Elements Navigation Introduction Introduction HTML HTML CSS CSS Layout Layout Who am I? Web Standards Web standards consist of recommendations and standards for aspects of the Internet published by various standards organizations. The main standards Built my first web site in 1999 organization is the World Wide Web Consortium (http://www.w3.org/), Graduated from University at Buffalo with a B.S. in which was founded by Tim Berners-Lee at MIT. Mathematics and a minor in Music Performance \Browser Wars" have been a large cause of web site designers' headaches. Worked as a student assistant on the Advancement Web Team Companies want users to only use their browser and no others. Standards (2004{2005) and at the Office of the Provost Web Services were/are sometimes not followed and sites might look different in different (2005{2007) browsers. Served as the web master for the Golden Key International Honor Society (2006-2008) and Impulse Dance Force If a web site complies with web standards, it means that it has valid HTML, (2006{2007) student organizations CSS, Javascript, etc. Took a graduate level course in information architecture Web Standards allows sites Currently a 4th year Mathematics Ph.D. student at Pitt to be created and debugged faster Served as the web master for the University of Pittsburgh to be both forward and backward compatible Student Chapter of SIAM (2008{2011) use less bandwidth require less time to maintain More information: http://www.webstandards.org/ Introduction Introduction HTML HTML CSS CSS Layout Layout Web Accessibility Information Architecture Information architecture refers to the organization of the Adhering to Web Standards makes web sites accessible. information and content on a web site. greater visibility in web searches Users want to find information quickly and without a lot of trouble all current browsers able to display your web site the way it (“findability" and \usability"), so do not create a maze (literally or was meant to be viewed figuratively) in which users need to guide themselves through. all browsers able to display the content of your web site smartphone browsers, voice browsers, and Braille browsers A tool that can be used to help determine your organization is able to understand your web site benchmarking. Look at other web sites that have a similar purpose as yours, Note: If you post documents that cannot be displayed easily with and compare how its information is organized. HTML (e.g., C.V.) to your web site, it is highly suggested to convert to PDF. Usability Checklist: http://www.infodesign.com.au/ftp/WebCheck.pdf Introduction Introduction HTML HTML CSS CSS Layout Layout Suggested Free Software Create a Pitt Web Directory Web site editor Pitt faculty, students, and staff can host personal web sites; that is Amaya (http://www.w3.org/Amaya/) { Windows, Mac OS X, and Linux what we will create today. Your web site can be viewed at already installed on your machine: Notepad (Windows), TextEdit (Mac OS X), gedit (Linux with GNOME) http://www.pitt.edu/∼username/ Image editor To get started, we need to create a Pitt Web Directory. (This only GIMP (http://www.gimp.org/) { Windows, Mac OS X, and Linux needs to be done once.) File transfer 1;2 WinSCP (http://winscp.net/) { Windows Open a terminal and type the following : Fetch (http://software.pitt.edu/) { Mac OS X >> ssh [email protected] gFTP (http://www.gftp.org/) { Linux >> cd public SSH client >> mkdir html PuTTY (http://www.chiark.greenend.org.uk/ sgtatham/putty/){ ~ 1 Windows For PuTTY users: you will type unixs.cssd.pitt.edu in \Hostname" (make sure \SSH" is selected), then you will be prompted for your username and password. You will type the second two lines in the terminal. X11 { installed in Applications/Utilities on Mac OS X 2 The first time you SSH into a server from a different computer, you will need to add the host key to your Terminal { installed on Linux cache (so when prompted, select \yes"). Introduction Introduction HTML HTML CSS CSS Layout Layout Create a Pitt Web Directory Useful UNIX Commands An HTML file titled index.html must be located in your ls (view the files in the current directory) public/html folder so that your web site can be viewed. ls -l (view the files in the current directory with permissions) However, since today we are going to develop our site, but we may pwd (find out what your current working directory is) not necessarily want to publish it yet, let's create a \dev" folder. chmod 755 filename (change the permissions of filename to In your terminal type the following: everyone can view the file, but only the owner may edit it) cd folder (change the directory to a different folder { note >> cd html that a folder above requires: ../) >> mkdir dev pico filename or emacs filename (edit a text file with Pico or Emacs) We will put all the files we work on today in this folder { you can exit (sign out) view them at http://www.pitt.edu/∼username/dev/ Introduction Introduction HTML Header HTML Header CSS Body CSS Body Layout Layout HTML The index.html Page Open a web site editor. Create a new HTML file { we'll call it index.html HTML = Hypertext Markup Language Let's start from scratch with the required HTML tags and build up markup language (not programming language) for describing from there: web pages <!DOCTYPE> HTML documents contain HTML tags and plain text <html> HTML tags usually come in pairs { there is an opening tag <head> and closing tag <title></title> </head> <body> </body> </html> Introduction Introduction HTML Header HTML Header CSS Body CSS Body Layout Layout Header: <!DOCTYPE> Header: <html> <!DOCTYPE> declaration <html> tag must be the very first thing in your file tells the browser that this is an HTML document is not an HTML tag; it is an instruction to the web browser about also known as the root element what version of HTML the page is written in container for all other HTML elements refers to a Document Type Definition (DTD), which specifies the attributes rules for the markup language so that the browsers render the xmlns { specifies the namespace to use (required in XHTML, but content correctly invalid in HTML) see all choices at http://www.w3schools.com/tags/tag_doctype.asp lang { specifies a language code for the content in an element xml:lang { specifies a language code for the content in an element, in XHTML documents We will use XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <html xmlns="http://www.w3.org/1999/xhtml" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> lang="en-US" xml:lang="en-US"> Introduction Introduction HTML Header HTML Header CSS Body CSS Body Layout Layout Header: <head> Header: <meta> <meta> tags <head> element provides metadata (information) about the HTML document for container for all the head elements browsers, search engines, and other web services will not be displayed on the page, but will be machine parsable must include a title for the document (what shows up in the must be properly closed title bar at the top of your browser), and can include scripts, styles, metadata, and more attributes content: gives the value associated with the http-equiv or name attribute <head> http-equiv: some values are content-language and <title>Insert Your Name Here</title> content-type (see all options at </head> http://www.w3schools.com/tags/att_meta_http_equiv.asp) name: some values are description, keywords, and robots (see all options at http://www.w3schools.com/tags/att_meta_name.asp) Introduction Introduction HTML Header HTML Header CSS Body CSS Body Layout Layout Header: <meta> Body <meta> tags Now that we have our document all set up, let's start adding <head> content! <meta http-equiv="content-type" content="text/html; charset="UTF-8" /> <meta http-equiv="content-language" content="en-us" /> Headings <meta name="description" content="Personal web site of Insert Your Name Here" /> <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <meta name="keywords" content="insert your name here, insert other <h6></h6> keywords" /> <meta name="robots" content="noimageindex" /> Paragraph text <title>Insert Your Name Here</title> <p></p> </head> Stylizing paragraph text More information about the robots value: emphasize (italicize): <em></em> https://developers.google.com/webmasters/control-crawl-index/docs/ strong/highlight (bold): <strong></strong> robots_meta_tag http://googlewebmastercentral.blogspot.com/2007/03/ Line break (must be properly closed) using-robots-meta-tag.html <br /> Introduction Introduction HTML Header HTML Header CSS Body CSS Body Layout Layout Body Body Links web site: <a href="http://www.pitt.edu/">Pitt</a> Table e-mail3: <a href="mailto:[email protected]">e-mail</a> <table> within a page: <tr> <a name="elementname">anchored text</a> <th>Header 1</th> <a href="#elementname">link to anchored text</a> <th>Header 2</th> </tr> Unordered List <tr> <ul> <td>Entry 1</td> <li></li> <td>Entry 2</td> </ul> </tr> </table> Ordered List <ol> Comments <li></li> <!--this text would not be displayed in the browser--> </ol> 3 Worried about spam? Use an encoder: http://www.wbwip.com/wbw/emailencoder.html Introduction Introduction HTML Header HTML Header CSS Body CSS Body Layout Layout Body Let's upload what we have so far! Images Open a file transfer program.