INFM 603: Session 2 Building Web Pages – Part I Paul Jacobs The iSchool University of Maryland Thursday, Sept. 8, 2016 This work is licensed under a Creative.

INFM 603: Session 2 Building Web Pages – Part I Paul Jacobs The iSchool University of Maryland Thursday, Sept. 8, 2016 This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States See http://creativecommons.org/licenses/by-nc-sa/3.0/us/ for detailshttp://creativecommons.org/licenses/by-nc-sa/3.0/us/

iSchool Today’s Topics Introduction to HTML/CSS Tools for Building and Serving Pages Putting it Together – How Web Sites Work

Intro to HTML/CSS

iSchool HyperText Markup Language (HTML) Intro to HTML/CSS Page Tools Putting it Together Simple document structure language for Web Advantages Adapts easily to different display capabilities Widely available display software (browsers) Disadvantages Does not directly control layout (compare to PDF) Does not formally specify structure (compare to XML)

iSchool What is HTML (more)? HyperText Markup Language Standard language for transmitting web pages/web content The input that allows web browsers to function The framework within which many scripts are written The output of many scripts Intro to HTML/CSS Page Tools Putting it Together

iSchool What About CSS? Intro to HTML/CSS Page Tools Putting it Together Cascading Style Sheets Separates appearance from markup Avoids repetitive work A “patch”? A “kluge”? More to come later

iSchool Related terms SGML (Standard Generalized Markup Language) (ca. 1986) – parent, framework XHTML (eXtensible HTML) – current version SHTML DHTML – dynamic HTML XML – a hybrid, closer to SGML and used for web interchange/middleware Intro to HTML/CSS Page Tools Putting it Together

iSchool <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Internet and WWW How to Program - Welcome Welcome to XHTML! The text between the title tags appears as the title of the web page. Elements between the body tags of the html document appear in the body of the web page Main.html Program Output © Prentice Hall A Basic HTML File/Page

iSchool Header.html © Prentice Hall HTML Headers <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Internet and WWW How to Program - Headers Level 1 Header Level 2 header Level 3 header Level 4 header Level 5 header Level 6 header The font size of the text between tags decreases as the header level increases. Every XHTML document is required to have opening and closing html tags.

iSchool Browser Ouput © Prentice Hall Headers – Browser Display Select a header based on the amount of emphasis you would like to give that text.

iSchool Links and Anchor Text Links.html © Prentice Hall <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Internet and WWW How to Program - Links Here are my favorite sites Click on a name to go to that page. Deitel Prentice Hall Yahoo! USA Today Text between strong tags will appear bold. Elements placed between paragraph tags will be set apart from other elements on the page with a vertical line before and after it. Linking is accomplished in XHTML with the anchor (a) element. The anchor links to the page whose value is given by the href attribute. The text between the a tags is the anchor for the link.

iSchool Links – Browser Output Clicking on the “Deitel” link will open up the Deitel homepage in a new browser window.

iSchool Embedding Images in HTML Picture.html © Prentice Hall <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Internet and WWW How to Program - Welcome <img src = "xmlhtp.jpg" height = "238" width = "183" alt = "XML How to Program book cover" /> <img src = "jhtp.jpg" height = "238" width = "183" alt = "Java How to Program book cover" /> The value of the src attribute of the image element is the location of the image file. The height and width attributes of the image element give the height and width of the image. The value of the alt attribute gives a description of the image. This description is displayed if the image cannot be displayed.

iSchool Embedded Images - Display Browser Output © Prentice Hall The second image could not be displayed properly, so the value of its alt attribute is displayed instead.

iSchool Nav.html © Prentice Hall <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Internet and WWW How to Program - Navigation Bar <img src = "buttons/links.jpg" width = "65" height = "50" alt = "Links Page" /> <img src = "buttons/list.jpg" width = "65" height = "50" alt = "List Example Page" /> <img src = "buttons/contact.jpg" width = "65" height = "50" alt = "Contact Page" /> <img src = "buttons/header.jpg" width = "65" height = "50" alt = "Header Page" /> <img src = "buttons/table.jpg" width = "65" height = "50" alt = "Table Page" /> Images as Anchors/Nav Menus Placing an image element between anchor tags, creates an image that is an anchor for a link. A line break will render an empty line on a web page.

iSchool Nav Output © Prentice Hall Images as Anchors/Display Using an image as an anchor works exactly the same as using text. Clicking on the image entitled “links” brings the user to the page on the right.

iSchool Some Image File Formats.jpg (JPEG) – Probably most common these days, allows compression, compatible with most image software, cameras, etc.gif (GIF) – Also fairly common, allows for transparency and automation.bmp (BMP, Bitmap) – No compression.png (PNG) – Avoids intellectual property issues but not as common There are still numerous issues with displaying images in browsers (e.g., size, download times, broken links, accessibility, etc.) Intro to HTML/CSS Page Tools Putting it Together

iSchool Some Other HTML Tags - the page header, where the title goes, for example - comments, very important but ignored by the browser beginning and end of paragraph Lists (unordered and ordered, and ) Tables (e.g.,,, … ) This Space Available Intro to HTML/CSS Page Tools Putting it Together

iSchool Some Other HTML Features Forms Image Maps Frames SEO-related tags, e.g. “ ” with “keywords” or “description” Intro to HTML/CSS Page Tools Putting it Together

iSchool Why Learn HTML? It helps us to understand something about computers and basic programming Even if we use page composition software (like Dreamweaver or Kompozer) or a CMS (like Drupal, WordPress) we may need to “hack” some HTML to make our pages the way we like them Scripting languages interact with HTML and may have to create HTML, so we can’t learn scripting without knowing some HTML Intro to HTML/CSS Page Tools Putting it Together

iSchool 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Internet and WWW How to Program - Forms 11 12 13 14 15 Feedback Form 16 17 Please fill out this form to help 18 us improve our site. 19 20 21 22 23 24 25 26 value = "main.html" /> 33 27 <input type = "hidden" name = "recipient" 28 value = "deitel@deitel.com" /> 29 <input type = "hidden" name = "subject" 30 value = "Feedback Form" /> 31 <input type = "hidden" name = "redirect" 32 HTML Forms Form.html © Prentice Hall Each form must begin and end with form tags. The method attribute specifies how the form’s data is sent to the Web server. The post method appends form data to the browser request. The value of the action attribute specifies the URL of a script on the Web server. Input elements are used to send data to the script that processes the form. A hidden value for the type attribute sends data that is not entered by the user.

iSchool HTML Forms (cont’d) Form.html © Prentice Hall 34 35 inserts a text box --> 36 Name: 37 <input name = "name" type = "text" size = "25" 38 maxlength = "30" /> 39 40 41 42 43 44 45 <input type = "submit" value = 46 "Submit Your Entries" /> 47 <input type = "reset" value = 48 "Clear Your Entries" /> 49 50 51 52 53 54 The size attribute gives the number of characters visible in the text box. The maxlength attribute gives the maximum number of characters the user can input. The label element describes the data the user needs to enter in the text box. The value attribute displays a name on the buttons created.

iSchool HTML Forms – Browser Display Form Display © Prentice Hall Text box created using input element. Submit button created using input element. Reset button created using input element.

iSchool Some Other Form Elements and Attributes [element] - drop down list with attributes checkbox [attribute, e.g. ] radio [attribute] - radio button, e.g. Password [attribute] Forms go with scripts (to come later; the input name and value “posts” to the script as a variable value) Intro to HTML/CSS Page Tools Putting it Together

iSchool A Note on Forms – Input, Reset and Submit Input attributes can be used by all scripts, including client-side (e.g., javascript) and server- side (e.g., PHP) Submit button (attribute) is only used with action element to send data to server-side Reset button (attribute) clears all input; it looks a lot like submit but acts differently Intro to HTML/CSS Page Tools Putting it Together

Time for Some Hands-On Practice

Creating and Editing Pages Using Tools

iSchool How Are Web Pages Created? Static pages using text editors (Notepad, Wordpad, Notepad++, emacs, VI,...) Good for practice Can be good for programming (e.g., Notepad++) Static pages using HTML editors (esp. WYSIWYG) like DreamWeaver, CompoZer Much faster for certain features, like layout, images Still allows hardcore HTML editing and programming Can support site publishing and site management Content Management Systems like Drupal, Joomla, WordPress Better for re-use, large scale site creation Can be harder to customize, program Intro to HTML/CSS Page Tools Putting it Together

iSchool Some Tools for This Class Some kind of FTP (to upload files to sites) (WinSCP suggested, others for MAC) Some kind of good editor (NotePad++ suggested) for code, etc. Some kind of HTML editor (KompoZer or Dreamweaver suggested) Content management, others to come later Intro to HTML/CSS Page Tools Putting it Together

iSchool Getting Started with Tools Goal: Create your own basic web page, get some practice with HTML Steps Try it first with WordPad or Notepad, ftp Then download and install Notepad++ and CompoZer Edit your page(s) and upload from CompoZer Get ready for more advanced features (CSS, forms, scripts) If you want to use other tools to complete the assignments, that is fine – but you may get less help from class Intro to HTML/CSS Page Tools Putting it Together

iSchool Why KompoZer Freely available Has very similar features to other HTML editors Not platform-specific (or browser-specific) Has at least some basic support for publishing, scripts Intro to HTML/CSS Page Tools Putting it Together

iSchool KompoZer – Basic Interface Intro to HTML/CSS Page Tools Putting it Together

iSchool KompoZer – Tag View Intro to HTML/CSS Page Tools Putting it Together

iSchool KompoZer – HTML Source View Intro to HTML/CSS Page Tools Putting it Together

More Hands-On Practice

iSchool Basics of Creating/Editing Web Pages Start with the basics – copy header or copy entire file from somewhere and edit it Make changes to your HTML file Open the file with various browsers and make sure that it looks right (note: if you’re using a WYSIWYG HTML editor this will be easier) Copy the file up to terpconnect or to some other public site as needed using SFTP (note: later in the class you’ll be able to copy entire sites with many pages, but for now we’ll do one file at a time) Note: if your HTML pages link to other local files (such as using ) you will need to make sure that those files are also in the right place. Intro to HTML/CSS Page Tools Putting it Together

iSchool File Transfer Program (FTP) Used to move files between machines Upload (put) moves from client to server Download (get) moves files from server to client Both visual and command line interfaces available Normally requires an account on the server Userid “anonymous” provides public access Course overview Physical infrastructure Course administration Intro to the Web/HTML

iSchool Internet  Web Internet: collection of global networks Web: way of managing information exchange (i.e., using a browser) There are many other uses for the Internet File transfer (FTP) Email (SMTP, POP, IMAP) Course overview Physical infrastructure Course administration Intro to the Web/HTML

iSchool Remote Sever The World-Wide Web Send Request (http) Requested Page (HTML) Fetch Page Proxy Server Local copy of Page requested My Browser Internet Intro to HTML/CSS Page Tools Putting it Together

iSchool Servers and Applications on the Web Intro to HTML/CSS Page Tools Putting it Together Client Web browser Web server Application logic Databases and DBMS Common gateway interface Host architecture Application partition

iSchool Uniform Resource Locator (URL) http://terpconnect.umd.edu:80/~psjacobs/INFM603_f16.htm Domain name Path File name Port Protocol Course overview Physical infrastructure Course administration Intro to the Web/HTML What’s the relationship between a URL and an IP address?

iSchool Transmission Control Protocol (TCP) Most common for the transport layer of the Internet (transports data packets from one address to another) Guarantees delivery all data Retransmits missing data Guarantees data will be delivered in order “Buffers” subsequent packets if necessary No guarantee of delivery time Long delays may occur without warning Course overview Physical infrastructure Course administration Intro to the Web/HTML

iSchool HTML (data/display) Internet communication protocols RTSPFTPEmail Web Server HTTP (transfer) File System URL (e.g.,http://www.foo.org/snarf.html) HTML HTTP URL “The Web” Course overview Physical infrastructure Course administration Intro to the Web/HTML

iSchool HyperText Transfer Protocol (HTTP) Send request GET /path/file.html HTTP/1.0 From: someuser@jmarshall.com User-Agent: HTTPTool/1.0 Server response HTTP/1.0 200 OK Date: Fri, 31 Dec 1999 23:59:59 GMT Content-Type: text/html Content-Length: 1354 Happy New Millennium! … Intro to HTML/CSS Page Tools Putting it Together

iSchool Where We Are in the Course We can create and edit basic HTML pages (or even basic sites) We can see how those pages will appear on the Web We need more power to change the look of the pages (Session 3) We can create forms using HTML but can’t do much with the input Need to be able to do basic computations on the input, using Javascript (Session 4) Need to be able to upload form data to other applications (Session 7, using PHP) Need to be able to read data from databases and store form data in databases (Sessions 5, 6, 7, and 8) We need to learn better tools for creating and managing web sites, rather than just pages (Session 9) We need to learn how HTML can be generated dynamically from programs and applications (Sessions 7, 8, and 9) Intro to HTML/CSS Page Tools Putting it Together

iSchool Recap – Intro to HTML Intro to HTML/CSS Page Tools Putting it Together What is HTML, what type of language is it, and what’s its role on the Web How to create and edit HTML files Using different types of tags Knowing how to structure and modify pages Different tools for creating and changing files Understanding the big picture Getting HTML files up to a web server Knowing what comes later (creating HTML dynamically, more complex sites, application integration)

INFM 603: Session 2 Building Web Pages – Part I Paul Jacobs The iSchool University of Maryland Thursday, Sept. 8, 2016 This work is licensed under a Creative.

Similar presentations

Presentation on theme: "INFM 603: Session 2 Building Web Pages – Part I Paul Jacobs The iSchool University of Maryland Thursday, Sept. 8, 2016 This work is licensed under a Creative."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

INFM 603: Session 2 Building Web Pages – Part I Paul Jacobs The iSchool University of Maryland Thursday, Sept. 8, 2016 This work is licensed under a Creative.

Similar presentations

Presentation on theme: "INFM 603: Session 2 Building Web Pages – Part I Paul Jacobs The iSchool University of Maryland Thursday, Sept. 8, 2016 This work is licensed under a Creative."— Presentation transcript:

Similar presentations

About project

Feedback