HTML Introduction to the Code
|
|
- Gloria Melton
- 6 years ago
- Views:
Transcription
1 HTML Introduction to the Code How the Web Works WWW part of the Internet (others: , FTP, Telnet) HTML/XHTML Docs Loaded to a Server Viewed in a Browser (Client) Clients / Server Client: Request & Render Content Browsers, mobile devices, screen readers Servers: Applications that deliver web content or services FTP, mail servers, DB servers, name servers, application servers WWW / Web docs Based on HTTP HYPERTEXT HTML HTTP: Hypertext Transfer Protocol The protocol or rules that specify how information is requested and sent between web server and client (Protocol: Standardized format for transferring data between devices Others: FTP, SMTP (Simple Mail Transfer Protocol), POP (Post Office Protocol)) HTTP Client HTTP Server 1
2 URL Uniform Resource Locator 1. Protocol: Tells the browser that its using Hypertext Transfer Protocol 2. Domain Name: Indicates the server that the browser should connect to 3. Pathname 4. Filename Folder Structure & Path Names Another Example: Browser will find the SOIS server (domain): Open the folder called: academics Find and open the folder called: graduate And retrieve and display the file called: mlis.html 2
3 HTML: Hypertext Markup Language Simple, universal mark up language used to publish content on the web Standard mark up language for web pages WEB PAGE Uses HTML tags Describes a documents structure A plain text document (no specific software needed) Saved with.htm or.html extension Hosted on a server HTML 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="utf-8"> 5. <title>untitled Document</title> 6. </head> 7. <body> This is where the content of your page will be placed. 8. </body> 9. </html> HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>a Brief Look At Changing Web Standards</title> <link href="newstyle.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" href="print.css" media="print"/> </head> <body> <div id="logo"> <h1>a Brief Look At Changing Web Standards</h1> </div> <div id="header"></div> <div id="page"> <div id="navigation"> <p><a href="newindex.html">current Trends</a><a href="newstandards.html">web Standards</a> <a href="newquotes.html">semantic Markup</a> <a href="newcss.html">css</a><a href="newresources.html">resources</a></p> <p> </p> <p> </p> <p> </p> </div> <div id="contents"> <h1>benefits of CSS</h1> <p>css allows us to separate the structure and content of our sites from the presentation of the site. There are many Benefits to this. </p> <h2>css - Separating Content From Presentation</h2> <ul> <li><a href="css.html">new STYLE</a> <a href="default.css">view style sheet</a> </li> <li><a href="nostyle.html">no STYLES</a></li> <li><a href="newexamples.html">examples</a></li> <li>current STYLE <a href="newstyle.css">view style sheet</a> </li> </ul> <h2>css - Accessibility and Alternative Devices</h2> <p>media Types:all, braille, embossed, handheld, <strong>print</strong>, projection, screen, speech, tv<br /> <br /> </p> <p><em>this site was created to demonstrate some of the benefits of writng standards compliant code, using semantic markup and implementing CSS to separate presentation for content. For a complete list of useful resources, please visit the resources page of this site. For questions, comments or suggestions, </em>rebecca Hall: [ <a href="mailto:rjhall@uwm.edu">rjhall@uwm.edu</a> ]<br /> <br /> </p> </div> </div> </div> <div id="footer"></div> <div id="notes">copyright 2008 rjhall@uwm.edu Last updated: June, 2008 <br /> Send Comments to <a href="#">webmaster@bwhdistrict.edu</a></div> </table> <p align="center"><font color="#ffffff" size="2"><font color="#000000"> <a href="../../about/index.html">about SOIS</a> <a href="../index.htm">academic Programs</a> <a href="../../admission/index.html">admission</a> <a href="../../alumni/index.html">alumni</a> <a href=" target="_blank">de Access</a> <a href="../../about/news/index.htm">news</a> <a href=" <a href=" <a href=" <a href="../../resources/index.html">student Resources</a> <br> <a href="mailto:info@sois.uwm.edu">contact Us</a> <a href="../../directory/index.html">directory</a> <a href="../../search/index.htm">search</a> <a href="../../sitemap/index.htm">site Map</a> <a href=" Intranet</a> </font></font></p> <div align="center"><span class="news style1"><font face="verdana, Arial, Helvetica, sansserif"><em><font face="verdana, Arial, Helvetica, sans-serif"><strong> 2009 </strong></font> University of Wisconsin-Milwaukee, School of Information Studies<br> <font color="#ffffff">please mail any comments or suggestions to <a href="mailt:hall@sois.uwm.edu">webmaster@sois.uwm.edu</a><br> This page last updated on 02/09</font><font color="#ffffff"></font></em></font></span><br> </div></td> </tr> </table> <map name="map"> <area shape="rect" coords="128,9,286,58" href=" alt="link to UWM"> </map> </body> </html> 3
4 HTML Structure HTML Elements (container tags markup + content) Empty Tags (standalone) HTML HTML Markup Element HTML Tags placed in angle brackets <> Consist of two tags: Opening tag Closing tag ( on & off ) End tag begins with a slash ( / ) 4
5 HTML Empty Tag (Standalone) Do not have text content Places an element on the page (provides a directive) Indicated by single tag XHTML note: all standalone tags require closing tag (ex: <br> now <br />) HTML Attributes: Information or instructions that modify a tag Attributes use values Located in the opening tag One tag can have multiple attributes HTML Basic HTML Structure 3 parts 1) <html> </html> First and last tag in a document 2) <head> </head> Includes info about your document Non visual elements (metatags, links to external resources, scripts or internal resources) <title> </title> Name of page (bookmarks, browser indexing) 3) <body> </body> Contains visual & structural elements (visible on page) 5
6 HTML4.01 XHTML1.1 HTML5 HTML?? the many flavors of HTML. HTML Versions Many versions of HTML Tim Berners Lee Simple, text only browsing & authoring system to share and manage information using the hypertext process to link to related documents Handful of tags Web content grew (Browsers made a mess of things) Browser developers implemented new features and new tags into their browsers HTML continued to grow new, cool, exciting tags (<background>, <font>, <bgsound>, <blink>, <image>) Each browser created its own proprietary tags only supported by that particular platform W3C stepped in to help ( Oversees ongoing development of the web Keeps track of browser features Help develop guidelines for common HTML language (HTML ) (versions: HTML Versions HTML tags - informal CERN document listing 12 tags (1991) HTML 2.0 specification released in 1995 HTML 3.2 first version developed and standardized exclusively by the W3C (1996) HTML 4.0 published as W3C recommendation (1997) HTML 4.01 published as W3C recommendation (1999) XHTML 1.0 published as W3C recommendation (2000) More structure less presentation (XML based approach) XHTML 1.1 published as W3C recommendation (2001) XHTML 2.0 NO STANDARD ( ) worked on but abandoned not backward compliant (new language) HTML 5 WHATWG (Web Hypertext Application Tech Working Group) (2004) W3C adopts the work of this group under name HTML 5.0 (2006) Working Draft (2007) 6
7 HTML vs. XHTML XHTML Extensible Hypertext Markup Language Markup language almost identical to HTML written with different rules Allows for the markup of text, inclusion of images, and is capable of linking documents together XHTML 1.0/1.1 XHTML is HTML 4.01 Reformatted using the syntax of XML HTML 4.01 Emphasized the separation of presentation from content structure (presentation handled by CSS) XHTML follows the more structured and rigid XML rules and syntax guidelines enables one document to be viewed on multiple devices (web browsers, cell phones, PDAs, etc) by creating different style sheets for each device. HTML V5 and XHTL V2 Explained: HTML vs. XHTML Syntax Differences All elements must be terminated (close tag) (Ex: <p> This is XHTML code! </p>) Empty tags must be terminated (close tag) written with a space and / symbol at the end (ex: <br />) All elements and attributes must be in lowercase All attribute values must be contained within quotes All elements must be nested properly XHTML what does it look like? 1. <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN transitional.dtd > 2. <html xmlns= > 3. <head> 4. <title>untitled Document</title> 5. </head> 6. <body> This is where the content of your page will be placed. 7. </body> 8. </html> 7
8 XHTML what does it look like? 1. <!DOCTYPE html PUBLIC //W3C//DTD XHTML 1.0 Transitional//EN transitional.dtd > DOCUMENT TYPE DEFINITION (DTD): Defines all elements and attributes in the language & their rules (defines which flavor of html you are using) a file that outlines the available structure, elements, attributes, and their appropriate usage (URL to this DTD machine readable file) XHTML what does it look like? DOCUMENT TYPE DEFINITION 3(most common) XHTML DTDs 1. XHTML Transitional: maintains backward compatibility with older browsers while still allowing access to HTML 4.01 elements. (includes presentation elements that were in common use) 2. XHTML Strict: doesn t allow any HTML elements that were designed to control the appearance of a page. (omits all deprecated elements) 3. XHTML Frameset: allows HTML elements needed to create framesets. Great explanation can be found at: Child, D. (2004) DTDs Explained, Added Bytes Available: explained/ XHTML what does it look like? 2. <html xmlns= lang= en xml:lang= en > XML namespace= This URL points to a file that gives detailed information about the particular XML vocabulary used on the page. 8
9 XHTML what does it look like? 3. <head> contains all the header information 4. <title> defines the page title </title> 5. </head> closing head tag 6. <body> where all visible content will be placed 7. </body> closing body tag 8. </html> closing html tag HTML Versions HTML tags - informal CERN document listing 12 tags (1991) HTML 2.0 specification released in 1995 HTML 3.2 first version developed and standardized exclusively by the W3C (1996) HTML 4.0 published as W3C recommendation (1997) HTML 4.01 published as W3C recommendation (1999) XHTML 1.0 published as W3C recommendation (2000) More structure less presentation (XML based approach) XHTML 1.1 published as W3C recommendation (2001) XHTML 2.0 NO STANDARD ( ) worked on but abandoned not backward compliant (new language) HTML 5 WHATWG (Web Hypertext Application Tech Working Group) (2004) W3C adopts the work of this group under name HTML 5.0 (2006) Working Draft (2007) HTML Versions Is HTML 5 Ready Yet? 9
10 HTML 5 Timeline 2003 HTML 5 development begins 2007 Oct - First W3C Working Draft 2009 Oct Last Call Working Draft 2011 Call for contributions for the test suite 2012 First draft of test suite 2015 Second draft of test suite 2019 Final version of test suite 2020 Reissued last call working draft 2022 Proposed Recommendation Ian Hickson, editor of HTML 5 Specification (Tech Republic Interview 2008) Can you use it now? Yes, some parts of HTML 5 User agents (devices & browsers) provide some support now Entire specification not yet ready for adoption but some parts are ready to use now Support Resources : HTML 5 vs HTML 4 Differences No Doctype needed <!DOCTYPE HTML> Character Encoding: <meta charset= UTF-8 /> New Elements: article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, ruby, section, source, summary, time, video Forms: more powerful form elements(built in validation) Integrated APIs (Application Programming Interfaces): Easier to develop web applications across multiple HTML Common Elements Block & Inline Elements Block Elements Ex: <p /> <h1> </h1> Each block element begins a new line Have space above and below the element by default Inline Elements Ex: <em> </em> Flow within other elements (do not start new line) 10
11 HTML Block Level Elements Paragraphs <p> </p> Headings<h#> </h#> (six levels of headings) provides logical hierarchy improves accessibility Block quote <blockquote> </blockquote> Preformatted text <pre> </pre> preserves white spaces returns and character spaces May be needed to convey meaning (code, poetry) Horizontal Rules <hr /> HTML Block Level Elements Unordered Lists <ul> </ul> & <li> </li> Default is disc change type: <ul type= circle >, square Ordered Lists <ol> </ol> & <li> </li> Default is # s change type: <ol type= A > a, I, i Definition Lists <dl> </dl> & <dt> </dt> & <dd> </dd> Note: Changing type and start value not supported in strict versions of XHTML HTML Inline Elements Line Breaks <br /> Semantic inline text elements Describes the meaning of the text Examples: <em>for emphasis, <strong> strongly emphasized, <q> short inline quote Presentational inline text elements provides descriptions of the elements style Examples: <b> bold, <center>, <i> italics (please use: <strong> & <em> instead) 11
12 HTML Special Characters Must use numeric or named character reference Examples Character space ( ) & Ampersand (&) Copyright symbol ( ) Euro ( ) HTML Images img tag <img> Required attribute: src <img src= uwm_logo.gif alt= UWM Logo /> HYPERTEXT it s a web things are linked 12
13 HTML Links The anchor <a> </a> Required attribute: href <a href= Link to UWM </a> <a href= src= uwm_logo.gif />UWM</a> Site Directory and File Structure Often mirrors visible site structure Logical naming conventions plain language Creates useful/understandable URLs 6,100 Files 250 Folders 13
14 Hypertext Absolute & Relative Links Absolute Links <a href= > UW Milwaukee </a> also called an external link Relative Links <a href= admissions.html > Link to admissions page </a> Relative links do not require the protocol and domain name These links are related to the current page (The page you want to link to is within the same domain as the document you are linking from) If you were working on your about.html document and you wanted to create a link to your index.html document, your link would look like this: <a href= index.html > HOME </a> If you were working on your index.html document and you wanted to create a link to your advising.html document, your link would look like this: <a href= academics/advising.html > Advising</a> 14
15 If you were working on your root level (main) index.html document and you wanted to create a link to your comps.html document, you link would look like this: <a href= academics/graduate/comps.html > Comps </a> Index?? Significance of index Usually the default filename a browser will look for if no filename is provide. retrieving a file called index.html in the Spring_2012 folder If you were working on your mlis.html document and you wanted to create a link to your advising.html document, your link would look like this: <a href=../advising.html > Advising</a> 15
16 <a href=../../index.html >Back to Home</a> Back to the Code 1. <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN > 2. <html xmlns= > 3. <head> 4. <title>untitled Document</title> 5. </head> 6. <body> This is where the content of your page will be placed. 7. </body> 8. </html> Meaningful Markup Semantic Markup Semantic Markup uses tags or elements that describe the content by its function. Adds meaning for the machine Browsers, mobile devices, screen readers, search engines can not see the page they extract meaning and context from the markup. 16
17 Meaningful Markup No Presentation Info <h1>this is the most important headline</h1> <p>this is ordinary paragraph text within the body of the document, where certain words and phrases may be <em>emphasized</em> to mark them as <strong>particularly important</strong>.</p> <h2>this is a headline of secondary importance to the headline above</h2> <p>any time you list related things, the items should be marked up in the form of a list:</p> <ul> <li>a list signals that a group of items are conceptually related to each other</li> <li>lists may be ordered (numbered or alphabetic) or unordered (bulleted items)</li> <li>lists may also be menus or lists of links for navigation </li> <li>cascading Style Sheets can make lists look many different ways</li> </ul> Browsers, mobile devices, screen readers, search engines can not see the page they extract meaning and context from the markup. The Site Development Process Presentation handled by CSS CSS Cascading Style Sheets A style sheet language developed to control the presentation of HTML documents Allows for the separates the presentation (formatting) from the structure and content of the page. Structure = the content (headings, lists, paragraphs) Presentation = how the structure looks visually in the user agent (red, bold, verdana) CSS used to format the presentation of the content fonts, colors, layout Benefits of CSS Offers more control Offers more control One CSS file can control thousands of pages (more efficient) More control over formatting Precise formatting: Line spacing, type sizes, rollovers, layout Modular design same site content and structure can be style for different output devices Media types: Screeen(browsers), mobile devices, print, screen reader Smaller files / Faster download No redundant formatting tags 17
18 Example of CSS Separate language with its own syntax 1. Selectors: Selects the element to be affected 2. Declaration: declares a style for a selected element Declaration block: property & value Example of CSS Declaration block Property: identifies what to change Value: how to change it Selector example h1{ font size: small; font family: Georgia, Times New Roman, Times, serif; color: #CC3300; margin top: 4em; margin bottom: 10em; } CSS for layout Examples 18
Web Development & Design Foundations with XHTML. Chapter 2 Key Concepts
Web Development & Design Foundations with XHTML Chapter 2 Key Concepts Learning Outcomes In this chapter, you will learn about: XHTML syntax, tags, and document type definitions The anatomy of a web page
More informationBasics of Web Design, 3 rd Edition Instructor Materials Chapter 2 Test Bank
Multiple Choice. Choose the best answer. 1. What element is used to configure a new paragraph? a. new b. paragraph c. p d. div 2. What element is used to create the largest heading? a. h1 b. h9 c. head
More informationHTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space.
HTML Summary Structure All of the following are containers. Structure Contains the entire web page. Contains information
More informationMODULE 2 HTML 5 FUNDAMENTALS. HyperText. > Douglas Engelbart ( )
MODULE 2 HTML 5 FUNDAMENTALS HyperText > Douglas Engelbart (1925-2013) Tim Berners-Lee's proposal In March 1989, Tim Berners- Lee submitted a proposal for an information management system to his boss,
More informationWeb Publishing Basics I
Web Publishing Basics I Jeff Pankin Information Services and Technology Contents Course Objectives... 2 Creating a Web Page with HTML... 3 What is Dreamweaver?... 3 What is HTML?... 3 What are the basic
More informationIntroduction to HTML5
Introduction to HTML5 History of HTML 1991 HTML first published 1995 1997 1999 2000 HTML 2.0 HTML 3.2 HTML 4.01 XHTML 1.0 After HTML 4.01 was released, focus shifted to XHTML and its stricter standards.
More informationCSI 3140 WWW Structures, Techniques and Standards. Markup Languages: XHTML 1.0
CSI 3140 WWW Structures, Techniques and Standards Markup Languages: XHTML 1.0 HTML Hello World! Document Type Declaration Document Instance Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson
More informationHTML CS 4640 Programming Languages for Web Applications
HTML CS 4640 Programming Languages for Web Applications 1 Anatomy of (Basic) Website Your content + HTML + CSS = Your website structure presentation A website is a way to present your content to the world,
More informationintroduction to XHTML
introduction to XHTML XHTML stands for Extensible HyperText Markup Language and is based on HTML 4.0, incorporating XML. Due to this fusion the mark up language will remain compatible with existing browsers
More informationHTML Overview. With an emphasis on XHTML
HTML Overview With an emphasis on XHTML What is HTML? Stands for HyperText Markup Language A client-side technology (i.e. runs on a user s computer) HTML has a specific set of tags that allow: the structure
More informationHTML+ CSS PRINCIPLES. Getting started with web design the right way
HTML+ CSS PRINCIPLES Getting started with web design the right way HTML : a brief history ❶ 1960s : ARPANET is developed... It is the first packet-switching network using TCP/IP protocol and is a precursor
More informationHtml basics Course Outline
Html basics Course Outline Description Learn the essential skills you will need to create your web pages with HTML. Topics include: adding text any hyperlinks, images and backgrounds, lists, tables, and
More informationINTRODUCTION TO HTML5! HTML5 Page Structure!
INTRODUCTION TO HTML5! HTML5 Page Structure! What is HTML5? HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML came in 1999. The web has changed a lot since
More informationIntroduction to Web Technologies
Introduction to Web Technologies James Curran and Tara Murphy 16th April, 2009 The Internet CGI Web services HTML and CSS 2 The Internet is a network of networks ˆ The Internet is the descendant of ARPANET
More informationProgrammazione Web a.a. 2017/2018 HTML5
Programmazione Web a.a. 2017/2018 HTML5 PhD Ing.Antonino Raucea antonino.raucea@dieei.unict.it 1 Introduzione HTML HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text
More informationA HTML document has two sections 1) HEAD section and 2) BODY section A HTML file is saved with.html or.htm extension
HTML Website is a collection of web pages on a particular topic, or of a organization, individual, etc. It is stored on a computer on Internet called Web Server, WWW stands for World Wide Web, also called
More informationReview of HTML. Chapter Pearson. Fundamentals of Web Development. Randy Connolly and Ricardo Hoar
Review of HTML Chapter 3 Fundamentals of Web Development 2017 Pearson Fundamentals of Web Development http://www.funwebdev.com - 2 nd Ed. What Is HTML and Where Did It Come from? HTML HTML is defined as
More informationCHAPTER 2 MARKUP LANGUAGES: XHTML 1.0
WEB TECHNOLOGIES A COMPUTER SCIENCE PERSPECTIVE CHAPTER 2 MARKUP LANGUAGES: XHTML 1.0 Modified by Ahmed Sallam Based on original slides by Jeffrey C. Jackson reserved. 0-13-185603-0 HTML HELLO WORLD! Document
More informationLearning Objectives. Review html Learn to write a basic webpage in html Understand what the basic building blocks of html are
HTML CSCI311 Learning Objectives Review html Learn to write a basic webpage in html Understand what the basic building blocks of html are HTML: Hypertext Markup Language HTML5 is new standard that replaces
More informationMore about HTML. Digging in a little deeper
More about HTML Digging in a little deeper Structural v. Semantic Markup Structural markup is using to encode information about the structure of a document. Examples: , , , and
More informationHTML: The Basics & Block Elements
HTML: The Basics & Block Elements CISC 282 September 13, 2017 What is HTML? Hypertext Markup Language Markup language "Set of words or symbols" Assigns properties to text Not actually part of the text
More informationText and Layout. Digital Multimedia, 2nd edition Nigel Chapman & Jenny Chapman Chapter 11. This presentation 2004, MacAvon Media Productions
Text and Layout Digital Multimedia, 2nd edition Nigel Chapman & Jenny Chapman Chapter 11 This presentation 344 345 Text in Graphics Maximum flexibility obtained by treating text as graphics and manipulating
More informationHTML. Hypertext Markup Language. Code used to create web pages
Chapter 4 Web 135 HTML Hypertext Markup Language Code used to create web pages HTML Tags Two angle brackets For example: calhoun High Tells web browser ho to display page contents Enter with
More informationThe internet is a worldwide collection of networks that link millions of computers. These links allow the computers to share and send data.
Review The internet is a worldwide collection of networks that link millions of computers. These links allow the computers to share and send data. It is not the internet! It is a service of the internet.
More informationMarkup Language. Made up of elements Elements create a document tree
Patrick Behr Markup Language HTML is a markup language HTML markup instructs browsers how to display the content Provides structure and meaning to the content Does not (should not) describe how
More informationCHAPTER 1: GETTING STARTED WITH HTML CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)
CHAPTER 1: GETTING STARTED WITH HTML EXPLORING THE HISTORY OF THE WORLD WIDE WEB Network: a structure that allows devices known as nodes or hosts to be linked together to share information and services.
More informationIndex. alt, 38, 57 class, 86, 88, 101, 107 href, 24, 51, 57 id, 86 88, 98 overview, 37. src, 37, 57. backend, WordPress, 146, 148
Index Numbers & Symbols (angle brackets), in HTML, 47 : (colon), in CSS, 96 {} (curly brackets), in CSS, 75, 96. (dot), in CSS, 89, 102 # (hash mark), in CSS, 87 88, 99 % (percent) font size, in CSS,
More informationHTML Hyper Text Markup Language
HTML Hyper Text Markup Language Home About Services index.html about.html services.html Homepage = index.html site root index.html about.html services.html images headshot.jpg charlie.jpg A webpage built
More information(1) I (2) S (3) P allow subscribers to connect to the (4) often provide basic services such as (5) (6)
Collection of (1) Meta-network That is, a (2) of (3) Uses a standard set of protocols Also uses standards d for structuring t the information transferred (1) I (2) S (3) P allow subscribers to connect
More informationAs we design and build out our HTML pages, there are some basics that we may follow for each page, site, and application.
Extra notes - Client-side Design and Development Dr Nick Hayward HTML - Basics A brief introduction to some of the basics of HTML. Contents Intro element add some metadata define a base address
More informationCS144 Notes: Web Standards
CS144 Notes: Web Standards Basic interaction Example: http://www.youtube.com - Q: what is going on behind the scene? * Q: What entities are involved in this interaction? * Q: What is the role of each entity?
More informationUnit 5 Web Publishing Systems Page 1 of 13 Part 4 HTML Part 4
Unit 5 Web Publishing Systems Page 1 of 13 Part 4 HTML 4.01 Version: 4.01 Transitional Hypertext Markup Language is the coding behind web publishing. In this tutorial, basic knowledge of HTML will be covered
More informationHTML Overview formerly a Quick Review
HTML Overview formerly a Quick Review Outline HTML into Emergence of DHTML HTML History Evolution of Web 1.0 to Web 2.0 DHTML = HTML + JavaScript + CSS Key Set of HTML Tags Basic: a, html, head, body,
More informationCPET 499/ITC 250 Web Systems. Topics
CPET 499/ITC 250 Web Systems Lecture on HTML and XHTML, Web Browsers, and Web Servers References: * Fundamentals of Web Development, 2015 ed., by Randy Connolly and Richard Hoar, from Pearson *Chapter
More informationc122jan2714.notebook January 27, 2014
Internet Developer 1 Start here! 2 3 Right click on screen and select View page source if you are in Firefox tells the browser you are using html. Next we have the tag and at the
More informationScripting for Multimedia LECTURE 5: INTRODUCING CSS3
Scripting for Multimedia LECTURE 5: INTRODUCING CSS3 CSS introduction CSS Level 1 --> CSS Level 2 --> CSS Level 3 (in modules) More than 50 modules are published Cascading style sheets (CSS) defines how
More informationHow the Internet Works
How the Internet Works The Internet is a network of millions of computers. Every computer on the Internet is connected to every other computer on the Internet through Internet Service Providers (ISPs).
More informationHTML & CSS. SWE 432, Fall 2017 Design and Implementation of Software for the Web
HTML & CSS SWE 432, Fall 2017 Design and Implementation of Software for the Web HTML: HyperText Markup Language LaToza Language for describing structure of a document Denotes hierarchy of elements What
More informationINTRODUCTION TO WEB USING HTML What is HTML?
Geoinformation and Sectoral Statistics Section (GiSS) INTRODUCTION TO WEB USING HTML What is HTML? HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language
More informationCertified HTML5 Developer VS-1029
VS-1029 Certified HTML5 Developer Certification Code VS-1029 HTML5 Developer Certification enables candidates to develop websites and web based applications which are having an increased demand in the
More informationLab 4 CSS CISC1600, Spring 2012
Lab 4 CSS CISC1600, Spring 2012 Part 1 Introduction 1.1 Cascading Style Sheets or CSS files provide a way to control the look and feel of your web page that is more convenient, more flexible and more comprehensive
More informationAnnouncements. Paper due this Wednesday
Announcements Paper due this Wednesday 1 Client and Server Client and server are two terms frequently used Client/Server Model Client/Server model when talking about software Client/Server model when talking
More informationModule 2 (VII): CSS [Part 4]
INTERNET & WEB APPLICATION DEVELOPMENT SWE 444 Fall Semester 2008-2009 (081) Module 2 (VII): CSS [Part 4] Dr. El-Sayed El-Alfy Computer Science Department King Fahd University of Petroleum and Minerals
More information('cre Learning that works for Utah STRANDS AND STANDARDS WEB DEVELOPMENT 1
STRANDS AND STANDARDS Course Description Web Development is a course designed to guide students in a project-based environment, in the development of up-to-date concepts and skills that are used in the
More informationHTML TUTORIAL ONE. Understanding What XHTML is Not
HTML TUTORIAL ONE Defining Blended HTML, XHTML and CSS HTML: o Language used to create Web pages o Create code to describe structure of a Web page XHTM: o Variation of HTML o More strictly defines how
More informationAnnouncements. 1. Class webpage: Have you been reading the announcements? Lecture slides and coding examples will be posted
Announcements 1. Class webpage: Have you been reading the announcements? Lecture slides and coding examples will be posted 2. Install Komodo Edit on your computer right away. 3. Bring laptops to next class
More informationManagement Information Systems
Management Information Systems Hands-On: HTML Basics Dr. Shankar Sundaresan 1 Elements, Tags, and Attributes Tags specify structural elements in a document, such as headings: tags and Attributes
More informationWeb Development & Design Foundations with HTML5 & CSS3 Instructor Materials Chapter 2 Test Bank
Multiple Choice. Choose the best answer. 1. What tag pair is used to create a new paragraph? a. b. c. d. 2. What tag pair
More informationModule 2 (III): XHTML
INTERNET & WEB APPLICATION DEVELOPMENT SWE 444 Fall Semester 2008-2009 (081) Module 2 (III): XHTML Dr. El-Sayed El-Alfy Computer Science Department King Fahd University of Petroleum and Minerals alfy@kfupm.edu.sa
More informationBASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS
BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS 1 LEARNING OUTCOMES Describe the anatomy of a web page Format the body of a web page with block-level elements including headings, paragraphs, lists,
More information11. HTML5 and Future Web Application
11. HTML5 and Future Web Application 1. Where to learn? http://www.w3schools.com/html/html5_intro.asp 2. Where to start: http://www.w3schools.com/html/html_intro.asp 3. easy to start with an example code
More informationFull file at New Perspectives on HTML and CSS 6 th Edition Instructor s Manual 1 of 13. HTML and CSS
New Perspectives on HTML and CSS 6 th Edition Instructor s Manual 1 of 13 HTML and CSS Tutorial One: Getting Started with HTML 5 A Guide to this Instructor s Manual: We have designed this Instructor s
More informationHTML. Mohammed Alhessi M.Sc. Geomatics Engineering. Internet GIS Technologies كلية اآلداب - قسم الجغرافيا نظم المعلومات الجغرافية
HTML Mohammed Alhessi M.Sc. Geomatics Engineering Wednesday, February 18, 2015 Eng. Mohammed Alhessi 1 W3Schools Main Reference: http://www.w3schools.com/ 2 What is HTML? HTML is a markup language for
More informationChapter 2 Creating and Editing a Web Page
Chapter 2 Creating and Editing a Web Page MULTIPLE CHOICE 1. is a basic text editor installed with Windows that you can use for simple documents or for creating Web pages using HTML. a. Microsoft Word
More informationUnderstanding this structure is pretty straightforward, but nonetheless crucial to working with HTML, CSS, and JavaScript.
Extra notes - Markup Languages Dr Nick Hayward HTML - DOM Intro A brief introduction to HTML's document object model, or DOM. Contents Intro What is DOM? Some useful elements DOM basics - an example References
More informationChapter 2:- Introduction to XHTML. Compiled By:- Sanjay Patel Assistant Professor, SVBIT.
Chapter 2:- Introduction to XHTML Compiled By:- Assistant Professor, SVBIT. Outline Introduction to XHTML Move to XHTML Meta tags Character entities Frames and frame sets Inside Browser What is XHTML?
More information1. The basic building block of an HTML document is called a(n) a. tag. b. element. c. attribute. d. container. Answer: b Page 5
Name Date Final Exam Prep Questions Worksheet #1 1. The basic building block of an HTML document is called a(n) a. tag. b. element. c. attribute. d. container. Answer: b Page 5 2. Which of the following
More informationCSC Web Programming. Introduction to HTML
CSC 242 - Web Programming Introduction to HTML Semantic Markup The purpose of HTML is to add meaning and structure to the content HTML is not intended for presentation, that is the job of CSS When marking
More informationCOMP519 Web Programming Lecture 3: HTML (HTLM5 Elements: Part 1) Handouts
COMP519 Web Programming Lecture 3: HTML (HTLM5 Elements: Part 1) Handouts Ullrich Hustadt Department of Computer Science School of Electrical Engineering, Electronics, and Computer Science University of
More informationAdvanced Web Programming C2. Basic Web Technologies
Politehnica University of Timisoara Advanced Web Programming C2. Basic Web Technologies 2013 UPT-AC Assoc.Prof.Dr. Dan Pescaru HTML Originally developed by Tim Berners-Lee in 1990 at CERN (Conseil Européen
More informationDownloads: Google Chrome Browser (Free) - Adobe Brackets (Free) -
Week One Tools The Basics: Windows - Notepad Mac - Text Edit Downloads: Google Chrome Browser (Free) - www.google.com/chrome/ Adobe Brackets (Free) - www.brackets.io Our work over the next 6 weeks will
More informationCreating and Editing a Web Page Using Inline Styles
HTML 2 Creating and Editing a Web Page Using Inline Styles Objectives You will have mastered the material in this chapter when you can: Identify elements of a Web page Start Notepad++ and describe the
More informationHTML & CSS November 19, 2014
University of Nebraska - Lincoln DigitalCommons@University of Nebraska - Lincoln Digital Humanities Workshop Series Center for Digital Research in the Humanities 11-19-2014 HTML & CSS November 19, 2014
More informationCMPT 165 Unit 2 Markup Part 2
CMPT 165 Unit 2 Markup Part 2 Sept. 17 th, 2015 Edited and presented by Gursimran Sahota Today s Agenda Recap of materials covered on Tues Introduction on basic tags Introduce a few useful tags and concepts
More informationBasic Web Pages with XHTML (and a bit of CSS) CSE 190 M (Web Programming), Spring 2008 University of Washington Reading: Chapter 1, sections
Basic Web Pages with XHTML (and a bit of CSS) CSE 190 M (Web Programming), Spring 2008 University of Washington Reading: Chapter 1, sections 1.1-1.3 Except where otherwise noted, the contents of this presentation
More informationCOPYRIGHTED MATERIAL. Contents. Chapter 1: Creating Structured Documents 1
59313ftoc.qxd:WroxPro 3/22/08 2:31 PM Page xi Introduction xxiii Chapter 1: Creating Structured Documents 1 A Web of Structured Documents 1 Introducing XHTML 2 Core Elements and Attributes 9 The
More informationChapter 1 Getting Started with HTML 5 1. Chapter 2 Introduction to New Elements in HTML 5 21
Table of Contents Chapter 1 Getting Started with HTML 5 1 Introduction to HTML 5... 2 New API... 2 New Structure... 3 New Markup Elements and Attributes... 3 New Form Elements and Attributes... 4 Geolocation...
More informationXHTML & CSS CASCADING STYLE SHEETS
CASCADING STYLE SHEETS What is XHTML? XHTML stands for Extensible Hypertext Markup Language XHTML is aimed to replace HTML XHTML is almost identical to HTML 4.01 XHTML is a stricter and cleaner version
More informationBrief Intro to HTML. CITS3403 Agile Web Development. 2018, Semester 1
Brief Intro to HTML CITS3403 Agile Web Development 2018, Semester 1 Some material Copyright 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley. Origins and Evolutions of HTML HTML was defined
More informationSemantic Web Lecture Part 1. Prof. Do van Thanh
Semantic Web Lecture Part 1 Prof. Do van Thanh Overview of the lecture Part 1 Why Semantic Web? Part 2 Semantic Web components: XML - XML Schema Part 3 - Semantic Web components: RDF RDF Schema Part 4
More informationPart 1: HTML Language HyperText Make-up Language
Part 1: HTML Language HyperText Make-up Language 09/08/2010 1 CHAPTER I Introduction about Web Design 2 Internet and World Wide Web The Internet is the world s largest computer network The Internet is
More informationFundamentals: Client/Server
Announcements Class Web Site: http://www.cs.umd.edu/projects/passport/classes/summer2008/ You can find this link at the end of the main passport site http://www.cs.umd.edu/projects/passport/webpage/ E-mail
More informationCreate web pages in HTML with a text editor, following the rules of XHTML syntax and using appropriate HTML tags Create a web page that includes
CMPT 165 INTRODUCTION TO THE INTERNET AND THE WORLD WIDE WEB By Hassan S. Shavarani UNIT2: MARKUP AND HTML 1 IN THIS UNIT YOU WILL LEARN THE FOLLOWING Create web pages in HTML with a text editor, following
More informationCreating and Building Websites
Creating and Building Websites Stanford University Continuing Studies CS 21 Mark Branom branom@alumni.stanford.edu Course Web Site: http://web.stanford.edu/group/csp/cs21/ Week 3 Slide 1 of 16 Week 3 Agenda
More informationChapter 1 Self Test. LATIHAN BAB 1. tjetjeprb{at}gmail{dot}com. webdesign/favorites.html :// / / / that houses that information. structure?
LATIHAN BAB 1 Chapter 1 Self Test 1. What is a web browser? 2. What does HTML stand for? 3. Identify the various parts of the following URL: http://www.mcgrawhill.com/books/ webdesign/favorites.html ://
More informationIndex LICENSED PRODUCT NOT FOR RESALE
Index LICENSED PRODUCT NOT FOR RESALE A Absolute positioning, 100 102 with multi-columns, 101 Accelerometer, 263 Access data, 225 227 Adding elements, 209 211 to display, 210 Animated boxes creation using
More informationWireframe :: tistory wireframe tistory.
Page 1 of 45 Wireframe :: tistory wireframe tistory Daum Tistory GO Home Location Tags Media Guestbook Admin 'XHTML+CSS' 7 1 2009/09/20 [ ] XHTML CSS - 6 (2) 2 2009/07/23 [ ] XHTML CSS - 5 (6) 3 2009/07/17
More informationIt is possible to create webpages without knowing anything about the HTML source behind the page.
What is HTML? HTML is the standard markup language for creating Web pages. HTML is a fairly simple language made up of elements, which can be applied to pieces of text to give them different meaning in
More informationWhat is XHTML? XHTML is the language used to create and organize a web page:
XHTML Basics What is XHTML? XHTML is the language used to create and organize a web page: XHTML is newer than, but built upon, the original HTML (HyperText Markup Language) platform. XHTML has stricter
More informationTutorial 1 Getting Started with HTML5. HTML, CSS, and Dynamic HTML 5 TH EDITION
Tutorial 1 Getting Started with HTML5 HTML, CSS, and Dynamic HTML 5 TH EDITION Objectives Explore the history of the Internet, the Web, and HTML Compare the different versions of HTML Study the syntax
More informationGRAPHIC WEB DESIGNER PROGRAM
NH128 HTML Level 1 24 Total Hours COURSE TITLE: HTML Level 1 COURSE OVERVIEW: This course introduces web designers to the nuts and bolts of HTML (HyperText Markup Language), the programming language used
More informationChapter 7 Typography, Style Sheets, and Color. Mrs. Johnson
Chapter 7 Typography, Style Sheets, and Color Mrs. Johnson Typography Typography refers to the arrangement, shape, size, style, and weight of text. Affects the navigation and usability of a web site and
More informationCS134 Web Site Design & Development. Quiz1
CS134 Web Site Design & Development Quiz1 Name: Score: Email: I Multiple Choice Questions (2 points each, total 20 points) 1. Which of the following is an example of an IP address? a. www.whitehouse.gov
More information1.264 Lecture 12. HTML Introduction to FrontPage
1.264 Lecture 12 HTML Introduction to FrontPage HTML Subset of Structured Generalized Markup Language (SGML), a document description language SGML is ISO standard Current version of HTML is version 4.01
More informationc122sep814.notebook September 08, 2014 All assignments should be sent to Backup please send a cc to this address
All assignments should be sent to p.grocer@rcn.com Backup please send a cc to this address Note that I record classes and capture Smartboard notes. They are posted under audio and Smartboard under XHTML
More informationWeb Design and Development ACS Chapter 3. Document Setup
Web Design and Development ACS-1809 Chapter 3 Document Setup 1 Create an HTML file At their very core, HTML files are simply text files with two additional feature.htm or.html as file extension name They
More informationCOPYRIGHTED MATERIAL. The Basics of HTML. What Is the World Wide Web?
The Basics of HTML Before you begin to code HTML pages for the Web, it is important to understand some of the technology, standards, and syntax behind the Web. This chapter introduces you to HTML and answers
More informationDeveloping a Basic Web Page
Developing a Basic Web Page Creating a Web Page for Stephen Dubé s Chemistry Classes 1 Objectives Review the history of the Web, the Internet, and HTML Describe different HTML standards and specifications
More informationCompuScholar, Inc. Alignment to Utah's Web Development I Standards
Course Title: KidCoder: Web Design Course ISBN: 978-0-9887070-3-0 Course Year: 2015 CompuScholar, Inc. Alignment to Utah's Web Development I Standards Note: Citation(s) listed may represent a subset of
More informationMotivation (WWW) Markup Languages (defined). 7/15/2012. CISC1600-SummerII2012-Raphael-lec2 1. Agenda
CISC 1600 Introduction to Multi-media Computing Agenda Email Address: Course Page: Class Hours: Summer Session II 2012 Instructor : J. Raphael raphael@sci.brooklyn.cuny.edu http://www.sci.brooklyn.cuny.edu/~raphael/cisc1600.html
More informationCourse Overview. Week 1
Course Overview Week 1 AGENDA WEBD101 Introduction Course Requirements Attendance Assignment Submissions This week 2 I live in Ohio Introduction I have worked for Franklin University as an adjunct / employee
More informationA Brief Introduction to HTML
A P P E N D I X HTML SuMMAry J A Brief Introduction to HTML A web page is written in a language called HTML (Hypertext Markup Language). Like Java code, HTML code is made up of text that follows certain
More informationIntroduction to Multimedia. MMP100 Spring 2017 thiserichagan.com/mmp100
Introduction to Multimedia MMP100 Spring 2017 profehagan@gmail.com thiserichagan.com/mmp100 Troubleshooting Check your tags! Do you have a start AND end tags? Does everything match? Check your syntax!
More informationFUNDAMENTALS OF WEB DESIGN (46)
8 Pages Contestant Number Time Rank FUNDAMENTALS OF WEB DESIGN (46) Regional 2010 Points Section Possible Awarded 20 Questions @ 5pts. 100 pts Application (Subj.) 100 pts TOTAL POINTS 200 pts Failure to
More information1/6/ :28 AM Approved New Course (First Version) CS 50A Course Outline as of Fall 2014
1/6/2019 12:28 AM Approved New Course (First Version) CS 50A Course Outline as of Fall 2014 CATALOG INFORMATION Dept and Nbr: CS 50A Title: WEB DEVELOPMENT 1 Full Title: Web Development 1 Last Reviewed:
More informationCIS 228 (Fall 2011) Exam 1, 9/27/11
CIS 228 (Fall 2011) Exam 1, 9/27/11 Name (sign) Name (print) email Question Score 1 12 2 12 3 12 4 12 5 12 6 12 7 12 8 16 TOTAL 100 CIS 228, exam 1 1 09/27/11 Question 1 True or false: _F_ A Cascading
More informationIntroduction to HTML
Introduction to HTML What is HTML? HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using markup HTML elements
More informationCS 1100: Web Development: Client Side Coding / Fall 2016 Lab 2: More HTML and CSS
Goals CS 1100: Web Development: Client Side Coding / Fall 2016 Lab 2: More HTML and CSS Practice writing HTML Add links and images to your web pages Apply basic styles to your HTML This lab is based on
More informationModify cmp.htm, contactme.htm and create scheduleme.htm
GRC 175 Assignment 2 Modify cmp.htm, contactme.htm and create scheduleme.htm Tasks: 1. Setting up Dreamweaver and defining a site 2. Convert existing HTML pages into proper XHTML encoding 3. Add alt tags
More informationMidterm 1 Review Sheet CSS 305 Sp 06
This is a list of topics that we have covered so far. This is not all inclusive of every detail and there may be items on the exam that are not explicitly listed here, but these are the primary topics
More information