HTML TUTORIAL ONE. Understanding What XHTML is Not
|
|
- August Bates
- 5 years ago
- Views:
Transcription
1 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 HTML code should be written/structured CSS: o Language used for describing presentation of Web pages o Ex. Colours and fonts on the Web page Separating structure and presentation makes easier to modify and share code to for many Web pages Web page designer: person who designs Web pages Web page developer: writes programming code to add function to Web page Learning About the Internet and the World Wide Web Internet:: global network of computers linked by high-speed data lines and wireless systems World Wide Web (WWW) is provided by Internet Web browser: o Software used to view/browse Web pages o Lets you navigate from one topic, page, site to another Contemporary browsers: Microsoft Internet Explorer, Mozilla Firefox, Apple Safari, Google Chrome (Opera popular in Europe) Exploring Hypertext and Markup Text and graphics must be formatted in HTML to be seen in a Web browser Hypertext: way to organize info so can click links and view content in non sequential order Markup: symbols in HTML code that indicate how content should appear in browser Syntax: specific rules for way code should be written (not a language) World Wide Web Consortium (W3C): organization that develops standards for languages used on Web Introducing XHTML XHTML (Extensible Hypertext Markup Language): specifies that code to display content on Web pages must follow certain rules Okay to type in uppercase in HTML but only type in lowercase in XHTML Cross-browser incompatibility: companies create own HTML code that only work on their browsers Understanding What XHTML is Not
2 Focus of XHTML: uniformly and consistently deliver Web page content Not in XHTML: o Complex text formatting o Composing images o Manipulating data o Footnotes, headers, footers o Automatic column and table layout Creating a Web Page with Basic XHTML Tags Mock-up: hand-drawn/typed plan for a page (create before starting XHTML) Element: o Creates structure on a Web page o Conveys formatting instructions to browser o Conveys information about Web page to browser/search engine Tag: representation of an element in XHTML code (tags are paired) Empty element: o Does not have content o Have only a start tag and no end tag o Ex. Break element: used to create a new line: <br /> Can test tags to apply more complex formatting Must be in correct order: <strong><em>nyce Paints</strong></em> Managing Your Files Store all files in same storage location (folder) Browser automatically looks for image files in same location Have to specify if image is in a different folder Typing the Basic XHTML Tags Document Type Declaration: instruction that associates particular Web page with Document Type Definition (all should begin with this) Document Type Definition (DTD): o Instruction to browser that determines extent to which Web page must follow XHTML standard o Strict: renders only code that exactly conforms to XHTML syntax o Transitional: renders all elements including deprecated code Deprecated code: code that W3C has determined should no longer be used Quirks mode: different browsers show Web page differently Standards mode: Web page is the same in all browsers <html>: root element with URL to Web site <head>,<meta>: after html, contains code not shown in browser (keywords, author, description of content, character set) Character set: ways to represent characters for communication and storage (ex. ISO-889-1) <title>: content appears in title bar at top of browser window <body>: container for all of page content (code, text, images, etc.)
3 Eye line: vertical area of code starting on left edge of screen where can easily see the start tags File servers: computers that store files seen on the Web (ex. UNIX) Entering Comments Comments <!-- comment -->: used to explain how code was written to oneself or to other Web developers Template file can be used as starting point for creating new Web pages Formatting Text on a Web Page Creating Headings Heading elements: o Used to bring attention to important topics on page o Change text size and make text appear in bold o Have default margin so white space created before and after heading o <h1> are largest, <h6> are smallest Difference between XHTML and Microsoft Word: Microsoft Word has many text sizes but XHTML only has six Displaying a Web Page in a Browser Save each change made in text editor and refresh page to know it worked Should test in more than one browser Do not need to be connected to Internet to view page Creating Body Text Paragraph element <p>: create a blank line between paragraphs (like pressing the Enter key twice) Will only put one space after punctuation even if you type two Block-level elements: browser automatically creates blank line above and below content, border, external margin (ex. Headings, paragraphs) Making Text Bold or Italic <strong> element: makes text appear in bold <em> element: makes text appear in italics Inline element: contained within block-level element Identifying Deprecated Elements Element W3C has determined should no longer be used: o Center element (used to center text) o Font element (changed appearance, size, colour of text) o Underline element (could be confused with a link) Address element used to be used to italicize addresses <blockquote> element: o Used to cite long quotation o Block-level element
4 o Indents text on left and right by one inch Not-supported elements: should not be used, like deprecated elements (ex. Frameset, frame, big, acronym) Inserting Special Characters (list p. 23) Special character: one that cannot be entered from the keyboard Referred to as character entities in XHTML Named character reference: o Combination of symbols including suggestion of special character s name o Start with ampersand, end with semicolon o Ex. is code for copyright symbol Numeric character reference: o Referring to special character s position in ISO character set o Preceded by ampersand and pound symbols o Followed by semicolon o Ex. is code for trademark symbol All special characters have numeric reference but not all have named Named references are case sensitive Web developers overuse   to enter space into Web page Should not use to create areas of white space or to indent Creating Superscripts and Subscripts <sup> element: creates superscript (raises character by one-half line of type) <sub> element: creates subscript (lowers character by one-half a line of type) Good for footnotes, endnotes, scientific notations Tips for Typing XHTML Code in a Text Editor How to keep XHTML code error-free o Type in all lowercase o Create an eye line (line up tags on left edge of screen) o Use white space (leave blank lines between tags, paragraphs, etc. to make code easier to read) o Insert break (<br />) tag at the beginning of a line of code, not at the end o Don t use deprecated tags o Don t use tags that are purely presentational (<b> or <i>) o Format terminal punctuation properly (one space rather than two) o Beware of quotation marks from pasted text (must use straight quotes not curly quotes) Using Images on a Web Page Understanding Image Files and File Types Graphics Interchanging File: filename extension.gif (used for clip art) Gif files are compressed so download faster
5 Joint Photographic Experts Group: file extension.jpg (most used) Portable Network Graphics: PNG file (chosen by W3C cause have better compression than.gif files) Acquiring Images Only use image if it will enhance appearance or show useful information Too many image is amateurish and takes long to download Using the Image Element Image element: o Used to insert image on a Web page o Empty element (has no content) o Ends with <img /> (space and slash) o Inline element so must be inside block-level element Attribute: o Change to an element o Takes a value that describes how element will be changed o Values must be enclosed in quotation marks o Type element, equals sign, value o Ex. <p><img src= nycelogo.gif /></p> Web page accessibility: extent to which Web page is accessible by as many people as possible despite visual/motor skill impairment Screen reader: software that reads aloud text in browser (use alt attribute to include descriptive value for a picture) Placeholder icon: substitutes alert icon for an image (showing image should appear there) Using the Width and Height Attributes Use width and height to specify dimensions of an image (in pixels) Browser will reserve correct space for image Aspect ratio: relationship between width and height of the image Scale: change height or width of an image Ex. <p><img src width= 750 height= 200 /></p> Creating Lists Unordered list: bulleted list <ul> Ordered list: list with numbers or letters <ol> Definition list: list with hanging indent format <dl> Creating an Definition List Used to create: o Chronology (list of events in time order) o Glossary (alphabetic list of terms and definitions) o Works Cited page (lists author names in order) o Question and answer lists
6 Begins with <dl> tag Defined term <dt> is next (along left margin) Definition data <dd> is after (indented from dt text) Block-level element Using the Abbreviation Element Acronym: group of letters that stands for several words <acronym> Abbreviation: shortened form of a noun <abbr> <abbr> element: o Replaced deprecated acronym element o Displays abbreviation with doted underline in Firefox browser Ex. <abbr titile= As Soon As Possible >ASAP</abbr> Using the Break Element Used to go to the next line (like pressing Enter) Does not have any content <br /> Inline element so must be inside block-level element tags Can put at beginning or end but should put at beginning of line Entering Code for Metadata Keywords: words that best identify content of a site Meta element: used to contain metadata One of <meta> tags is to help search engine find site based on keywords Can use common misspellings as well so more people can find site Ex. <meta name= keywords content= /> Validating the Completed File Validate: process of checking file for syntax errors Only checks to see if code complies with XHTML standard Does not check spelling or grammar errors W3C site for validating: HTML TUTORIAL THREE Introducing Cascading Style Sheets Cascading Style Sheets (CSS): o Used for the presentation, formatting of Web pages o Way to easily and efficiently format lots of pages to have same appearance Advantages of CSS over XHTML: o Greater consistency in your Web site (can apply styles created in one document to some or all of pages in Web site)
7 o Easily modified code (when modify code to change style of one page, all pages can change) o More flexible formatting (can format/position text in ways that XHTML cannot) o Greater functionality (tab indents, line spacing, margins available in CSS but not XHTML) Cross-browser support: CSS feature appears in all browsers the same way No browser supports all features of CSS Understanding How Styles Are Written CSS can change style of text (colour, type size) CSS style: collection of one or more rules Style sheet: collection of styles Rule: combination of a selector, a property and a value Selector: identifies element to which style is being applied Most common selectors: o Element selectors: used to format XHTML elements o Class selectors: used to select specific XHTML element/format one or more elements on a Web page o Id selectors: used to uniquely format single element on a Web page Property: describes how selector will be modified Value: indicates extent to which property will be modified Ex. h1 { color: white; } Declaration: each property and value pair (can be more than one) Paragraph format: places all CSS code on one or more lines as wrapping text Working with Colour Colour property: used to change foreground (text) colour of an element Background-colour property: change background colour of an element Colours entered in CSS code by name, RGB triplet or by hexadecimal value Hexadecimal system: o Based on number 16 o Uses numbers 0-15 o Precede each value with # symbol (indicates numbers after should be treated as code not as number) o Enter three pairs of numbers or letters representing intensity of red, green and blue (00 is lowest and FF is highest) Creating an Embedded Style Sheet Embedded style sheet: one where CSS code is written in <head> section of XHTML document Advantage is XHTML code and CSS code are on same page Style element: special element that serves as container for all style code Type attribute: always entered within the start <style> tag (has a value of text/css)
8 Ex. <style type= text/css > Display property: determines how an element will be displayed (most common are block and inline) Grouping Element Selectors Grouped selectors: selectors with same declarations grouped into a commaseparated list Ex. p, li { color: navy; } will make text in list and paragraphs navy Using Descendant Selectors Can nest tags to apply multiple formatting features to same text Descendant selector: selector nested within another selector Ex. strong em { color: maroon; } makes things bold and italics in maroon Will only apply when em is nested in strong element not when by themselves Using the Font Properties (list p. 112) Changing the Font Style and Font Weight Font-style property: can be italic, oblique or normal Font-weight property: uses one of four keywords to change thickness of text (lighter, bold, bolder, normal) Can also specify font-weight with numbers from Entered the same way color property is Making Text Appear in Small Capital Letters Font-variant property: makes text appear in small caps Small caps: o Has slightly smaller point size than regular text and is in all caps o Capital letters are usually 2 point sizes larger than lowercase letters Changing the Font Size Font-size property: used to change font size Can specify any font size in CSS (unlike XHTML) Usually expressed in em units, as percent or as keyword Em unit: equals width of an uppercase M Do not put a space between the number and the type of measurement Relative value: value that increases/decreases in relation to parent element Absolute value: fixed value that will not increase/decrease relative to parent element Changing the Font Family Font-family property: used to change typeface of text Font family: set of fonts that have similar characteristics Generic font: o Attempts to duplicate as many features of specific font as possible
9 o Will be used if none of specified fonts are available o Five cross-platform fonts: serif, sans-serif, monospace, cursive, fantasy Good to list several fonts as value for font-family incase computer does not have one Must enclose font-family in quotations if it has more than one word (ex. fontfamily: Times New Roman, serif;) Using the Font Shorthand Property Shorthand property: used to set a related group of properties in one declaration Set some or all of font properties in one declaration (ex. font: italic normal 1.2em Arial, Helvetica, sans-serif;) Must specify values for font-size and font-family Must list values for font properties in specific order 1. Font-style 2. Font-weight 3. Font-variant 4. Font-size 5. Font-family Validating the CSS Code for the Completed File Can validate document to check correctness of CSS code Does not check for spelling or grammar errors Checks to see if code complies with CSS standard W3C validator site:
Session 3.1 Objectives Review the history and concepts of CSS Explore inline styles, embedded styles, and external style sheets Understand style
Session 3.1 Objectives Review the history and concepts of CSS Explore inline styles, embedded styles, and external style sheets Understand style precedence and style inheritance Understand the CSS use
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 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 informationAppendix D CSS Properties and Values
HTML Appendix D CSS Properties and Values This appendix provides a brief review of Cascading Style Sheets (CSS) concepts and terminology, and lists CSS level 1 and 2 properties and values supported by
More informationCSS: The Basics CISC 282 September 20, 2014
CSS: The Basics CISC 282 September 20, 2014 Style Sheets System for defining a document's style Used in many contexts Desktop publishing Markup languages Cascading Style Sheets (CSS) Style sheets for HTML
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 information8a. Cascading Style Sheet
INFS 2150 Introduction to Web Development 8a. Cascading Style Sheet 1 Objectives Concepts of cascading style sheets (CSS). 3 ways of using CSS: inline styles, embedded styles, and external style sheet.
More information8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) Learning Objectives (2 of 2)
Web Development & Design Foundations with HTML5 Ninth Edition Chapter 3 Configuring Color and Text with CSS Slides in this presentation contain hyperlinks. JAWS users should be able to get a list of links
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 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 informationTutorial 3: Working with Cascading Style Sheets
Tutorial 3: Working with Cascading Style Sheets College of Computing & Information Technology King Abdulaziz University CPCS-665 Internet Technology Objectives Review the history and concepts of CSS Explore
More informationIntroduction to Multimedia. MMP100 Spring 2016 thiserichagan.com/mmp100
Introduction to Multimedia MMP100 Spring 2016 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 informationHTML/XML. HTML Continued Introduction to CSS
HTML/XML HTML Continued Introduction to CSS Entities Special Characters Symbols such as +, -, %, and & are used frequently. Not all Web browsers display these symbols correctly. HTML uses a little computer
More informationCOSC 2206 Internet Tools. CSS Cascading Style Sheets
COSC 2206 Internet Tools CSS Cascading Style Sheets 1 W3C CSS Reference The official reference is here www.w3.org/style/css/ 2 W3C CSS Validator You can upload a CSS file and the validator will check it
More informationReading 2.2 Cascading Style Sheets
Reading 2.2 Cascading Style Sheets By Multiple authors, see citation after each section What is Cascading Style Sheets (CSS)? Cascading Style Sheets (CSS) is a style sheet language used for describing
More information3.1 Introduction. 3.2 Levels of Style Sheets. - HTML is primarily concerned with content, rather than style. - There are three levels of style sheets
3.1 Introduction - HTML is primarily concerned with content, rather than style - However, tags have presentation properties, for which browsers have default values - The CSS1 cascading style sheet specification
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 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 information- HTML is primarily concerned with content, rather than style. - However, tags have presentation properties, for which browsers have default values
3.1 Introduction - HTML is primarily concerned with content, rather than style - However, tags have presentation properties, for which browsers have default values - The CSS1 cascading style sheet specification
More informationMake a Website. A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1
Make a Website A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1 Overview Course outcome: You'll build four simple websites using web
More information3.1 Introduction. 3.2 Levels of Style Sheets. - The CSS1 specification was developed in There are three levels of style sheets
3.1 Introduction - The CSS1 specification was developed in 1996 - CSS2 was released in 1998 - CSS2.1 reflects browser implementations - CSS3 is partially finished and parts are implemented in current browsers
More information- The CSS1 specification was developed in CSS2 was released in CSS2.1 reflects browser implementations
3.1 Introduction - The CSS1 specification was developed in 1996 - CSS2 was released in 1998 - CSS2.1 reflects browser implementations - CSS3 is partially finished and parts are implemented in current browsers
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 informationCreating Web Pages with SeaMonkey Composer
1 of 26 6/13/2011 11:26 PM Creating Web Pages with SeaMonkey Composer SeaMonkey Composer lets you create your own web pages and publish them on the web. You don't have to know HTML to use Composer; it
More informationCMPT 165: More CSS Basics
CMPT 165: More CSS Basics Tamara Smyth, tamaras@cs.sfu.ca School of Computing Science, Simon Fraser University October 14, 2011 1 The Favorites Icon The favorites icon (favicon) is the small icon you see
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 informationCMPT 165 INTRODUCTION TO THE INTERNET AND THE WORLD WIDE WEB
CMPT 165 INTRODUCTION TO THE INTERNET AND THE WORLD WIDE WEB Unit 3 Cascading Style Sheets (CSS) Slides based on course material SFU Icons their respective owners 1 Learning Objectives In this unit you
More informationThe building block of a CSS stylesheet. A rule consists of a selector and a declaration block (one or more declarations).
WDI Fundamentals Unit 4 CSS Cheat Sheet Rule The building block of a CSS stylesheet. A rule consists of a selector and a declaration block (one or more declarations). Declaration A declaration is made
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 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 informationACSC 231 Internet Technologies
ACSC 231 Internet Technologies Lecture 7 Web Typography Efthyvoulos Kyriacou - Assoc. Prof. Frederick University Resources: C. Markides (Frederick University) Slide 1 ACSC 231: Internet Technologies 23/12/2008
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 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 informationStudy Guide 2 - HTML and CSS - Chap. 6,8,10,11,12 Name - Alexia Bernardo
Study Guide 2 - HTML and CSS - Chap. 6,8,10,11,12 Name - Alexia Bernardo Note: We skipped Study Guide 1. If you d like to review it, I place a copy here: https:// people.rit.edu/~nbbigm/studyguides/sg-1.docx
More informationINFORMATICA GENERALE 2014/2015 LINGUAGGI DI MARKUP CSS
INFORMATICA GENERALE 2014/2015 LINGUAGGI DI MARKUP CSS cristina gena dipartimento di informatica cgena@di.unito.it http://www.di.unito.it/~cgena/ materiale e info sul corso http://www.di.unito.it/~cgena/teaching.html
More information- The CSS1 specification was developed in CSSs provide the means to control and change presentation of HTML documents
3.1 Introduction - The CSS1 specification was developed in 1996 - CSS2 was released in 1998 - CSS3 is on its way - CSSs provide the means to control and change presentation of HTML documents - CSS is not
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 informationWeb Design and Development Tutorial 03
Table of Contents Web Design & Development - Tutorial 03... 2 Using and Applying CSS to XHTML... 2 Conventions... 2 What you need for this tutorial... 2 Common Terminology... 3 Parent / Child Elements...
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 informationCSS. Text & Font Properties. Copyright DevelopIntelligence LLC
CSS Text & Font Properties 1 text-indent - sets amount of indentation for first line of text value: length measurement inherit default: 0 applies to: block-level elements and table cells inherits: yes
More informationTutorial 2 - HTML basics
Tutorial 2 - HTML basics Developing a Web Site The first phase in creating a new web site is planning. This involves determining the site s navigation structure, content, and page layout. It is only after
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 informationCS105 Course Reader Appendix A: HTML Reference
Stanford CS106E Young CS105 Course Reader Appendix A: HTML Reference Tag Index by Section The tags are listed in one of nine sections as shown below: Character Appearance Elements , Bold
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 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 informationIntroduction to Web Tech and Programming
Introduction to Web Tech and Programming Cascading Style Sheets Designed to facilitate separation of content and presentation from a document Allows easy modification of style for an entire page or an
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 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 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 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 informationReview Question 1. Which tag is used to create a link to another page? 1. <p> 2. <li> 3. <a> 4. <em>
Introduction to CSS Review Question 1 Which tag is used to create a link to another page? 1. 2. 3. 4. Review Question 1 Which tag is used to create a link to another page? 1. 2.
More informationHTML TAG SUMMARY HTML REFERENCE 18 TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES MOST TAGS
MOST TAGS CLASS Divides tags into groups for applying styles 202 ID Identifies a specific tag 201 STYLE Applies a style locally 200 TITLE Adds tool tips to elements 181 Identifies the HTML version
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 informationThe Benefits of CSS. Less work: Change look of the whole site with one edit
11 INTRODUCING CSS OVERVIEW The benefits of CSS Inheritance Understanding document structure Writing style rules Attaching styles to the HTML document The cascade The box model CSS units of measurement
More informationSymbols INDEX. !important rule, rule, , 146, , rule,
Symbols!important rule, 209 @import rule, 140-144, 146, 155-156, 157 @media rule, 155-156 A element. See anchors abbr attribute, 36-37 element, 87, 90-91 absolute positioning, 177, 178, 182,
More informationUsing Dreamweaver 2 HTML
Using Dreamweaver 2 The World Wide Web is based on (Hypertext markup language). Although Dreamweaver is primarily a WYSIWYG editor, it is still worthwhile for Dreamweaver users to be familiar with for
More informationIntroduction to CSS. Fijihosting.com Introduction to CSS page 1. What are style sheets? Lovely! How do I use them?
Introduction to CSS Style sheets (or to give them their full title, cascading style sheets or CSS) are becoming more and more common on the Web. They were first introduced in a limited form to Internet
More informationChapter 4 A Hypertext Markup Language Primer
Chapter 4 A Hypertext Markup Language Primer XHTML Mark Up with Tags Extensible Hypertext Markup Language Format Word/abbreviation in < > PAIR Singleton (not surround text) />
More informationSTD 7 th Paper 1 FA 4
STD 7 th Paper 1 FA 4 Choose the correct option from the following 1 HTML is a. A Data base B Word Processor C Language D None 2 is a popular text editor in MS window A Notepad B MS Excel C MS Outlook
More informationUsing Dreamweaver CS6
Using Dreamweaver CS6 2 The World Wide Web is based on (Hypertext markup language). Although Dreamweaver is primarily a WYSIWYG editor, it is still worthwhile for Dreamweaver users to be familiar with
More informationCreating A Website - Part 1: Web Design principles, HTML & CSS. CSS Color Values. Hexadecimal Colors. RGB Color
Notes Week 3 By: Marisa Stoolmiller CSS Color Values With CSS, colors can be specified in different ways: Color names Hexadecimal values RGB values HSL values (CSS3) HWB values (CSS4) Hexadecimal Colors
More informationCSS Styles Quick Reference Guide
Table 1: CSS Font and Text Properties Font & Text Properties Example(s) font-family Font or typeface font-family: Tahoma font-size Size of the font font-size: 12pt font-weight Normal or bold font-weight:
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 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 informationFonts, text, and colour on the web. Sourcing, resizing, and inserting web site images MGMT 230 LAB
Fonts, text, and colour on the web Sourcing, resizing, and inserting web site images MGMT 230 LAB Fonts and font families Font families are used in web development rather than just the name of one font
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 informationChapter 1 True/False Instructions: Circle T if the statement is true or F if the statement is false.
Name Date Chapter 1 True/False Instructions: Circle T if the statement is true or F if the statement is false. T F 1. WYSIWYG stands for What You See Is What You Get. T F 2. The menu bar shows the application
More informationHTML and CSS: An Introduction
JMC 305 Roschke spring14 1. 2. 3. 4. 5. The Walter Cronkite School... HTML and CSS: An Introduction
More informationAdobe Dreamweaver CS5/6: Learning the Tools
Adobe Dreamweaver CS5/6: Learning the Tools Dreamweaver is an HTML (Hypertext Markup Language) editor, authoring tool, and Web site management tool. Dreamweaver is a WYSIWYG (what you see is what you get)
More informationPerfect Student Midterm Exam March 20, 2007 Student ID: 9999 Exam: 7434 CS-081/Vickery Page 1 of 5
Perfect Student Midterm Exam March 20, 2007 Student ID: 9999 Exam: 7434 CS-081/Vickery Page 1 of 5 NOTE: It is my policy to give a failing grade in the course to any student who either gives or receives
More informationCo. Louth VEC & Co. Monaghan VEC. Programme Module for. Web Authoring. leading to. Level 5 FETAC. Web Authoring 5N1910
Co. Louth VEC & Co. Monaghan VEC Programme Module for Web Authoring leading to Level 5 FETAC Web Authoring 5N1910 Web Authoring 5N1910 1 Introduction This programme module may be delivered as a standalone
More informationIndex. CSS directive, # (octothorpe), intrapage links, 26
Holzschlag_.qxd 3/30/05 9:23 AM Page 299 Symbols @import CSS directive, 114-115 # (octothorpe), intrapage links, 26 A a element, 23, 163, 228 abbr element, 228 absolute keywords for font sizing, 144 absolute
More informationNEW WEBMASTER HTML & CSS FOR BEGINNERS COURSE SYNOPSIS
NEW WEBMASTER HTML & CSS FOR BEGINNERS COURSE SYNOPSIS LESSON 1 GETTING STARTED Before We Get Started; Pre requisites; The Notepad++ Text Editor; Download Chrome, Firefox, Opera, & Safari Browsers; The
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 information<body bgcolor=" " fgcolor=" " link=" " vlink=" " alink=" "> These body attributes have now been deprecated, and should not be used in XHTML.
CSS Formatting Background When HTML became popular among users who were not scientists, the limited formatting offered by the built-in tags was not enough for users who wanted a more artistic layout. Netscape,
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 informationWeb Development and Design Foundations with HTML5 8th Edition
Web Development and Design Foundations with HTML5 8th Edition Felke-Morris TEST BANK Full clear download (no formatting errors) at: Web Development and Design Foundations with HTML5 8th Edition Felke-Morris
More informationChapter 4. Introduction to XHTML: Part 1
Chapter 4. Introduction to XHTML: Part 1 XHTML is a markup language for identifying the elements of a page so a browser can render that page on a computer screen. Document presentation is generally separated
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 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 informationCOMSC-030 Web Site Development- Part 1. Part-Time Instructor: Joenil Mistal
COMSC-030 Web Site Development- Part 1 Part-Time Instructor: Joenil Mistal Chapter 1 1 HTML and Web Page Basics Are you interested in building your own Web pages? This chapter introduces you to basic HTML
More informationWeb 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 informationCSE 3. Marking Up with HTML. Comics Updates Shortcut(s)/Tip(s) of the Day Google Earth/Google Maps ssh Anti-Spyware
CSE 3 Comics Updates Shortcut(s)/Tip(s) of the Day Google Earth/Google Maps ssh Anti-Spyware 1-1 4-1 Chapter 4: Marking Up With HTML: A Hypertext Markup Language Primer Fluency with Information Technology
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 informationCertified HTML Designer VS-1027
VS-1027 Certification Code VS-1027 Certified HTML Designer Certified HTML Designer HTML Designer Certification allows organizations to easily develop website and other web based applications which are
More informationCSS. https://developer.mozilla.org/en-us/docs/web/css
CSS https://developer.mozilla.org/en-us/docs/web/css http://www.w3schools.com/css/default.asp Cascading Style Sheets Specifying visual style and layout for an HTML document HTML elements inherit CSS properties
More informationUsing CSS in Web Site Design
Question 1: What are some of the main CSS commands I should memorize? Answer 1: The most important part of understanding the CSS language is learning the basic structure and syntax so you can use the language
More informationCSC 121 Computers and Scientific Thinking
CSC 121 Computers and Scientific Thinking Fall 2005 HTML and Web Pages 1 HTML & Web Pages recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language
More informationWeb Development & Design Foundations with HTML5
Web Development & Design Foundations with HTML5 KEY CONCEPTS Copyright Terry Felke-Morris 1 Learning Outcomes In this chapter, you will learn how to... Describe the evolution of style sheets from print
More informationWeb Page Creation Part I. CS27101 Introduction to Web Interface Design Prof. Angela Guercio
Web Page Creation Part I CS27101 Introduction to Web Interface Design Prof. Angela Guercio Objective In this lecture, you will learn: What HTML is and what XHTML is How to create an (X)HTML file The (X)HTML
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 informationWelcome Please sit on alternating rows. powered by lucid & no.dots.nl/student
Welcome Please sit on alternating rows powered by lucid & no.dots.nl/student HTML && CSS Workshop Day Day two, November January 276 powered by lucid & no.dots.nl/student About the Workshop Day two: CSS
More informationUsing Dreamweaver to Create Page Layouts
Using Dreamweaver to Create Page Layouts with Cascading Style Sheets (CSS) What are Cascading Style Sheets? Each cascading style sheet is a set of rules that provides consistent formatting or a single
More information1 of 7 11/12/2009 9:29 AM
1 of 7 11/12/2009 9:29 AM Home Beginner Tutorials First Website Guide HTML Tutorial CSS Tutorial XML Tutorial Web Host Guide SQL Tutorial Advanced Tutorials Javascript Tutorial PHP Tutorial MySQL Tutorial
More informationBIM222 Internet Programming
BIM222 Internet Programming Week 7 Cascading Style Sheets (CSS) Adding Style to your Pages Part II March 20, 2018 Review: What is CSS? CSS stands for Cascading Style Sheets CSS describes how HTML elements
More informationWeb Design and Development ACS-1809
Web Design and Development ACS-1809 Chapter 4 Cascading Style Sheet Cascading Style Sheets A style defines the appearance of a document A style sheet - a file that describes the layout and appearance of
More informationIntroduction to using HTML to design webpages
Introduction to using HTML to design webpages #HTML is the script that web pages are written in. It describes the content and structure of a web page so that a browser is able to interpret and render the
More informationWeb Development & Design Foundations with HTML5
1 Web Development & Design Foundations with HTML5 CHAPTER 3 CSS BASICS Copyright Terry Felke-Morris 2 Learning Outcomes In this chapter, you will learn how to... Describe the evolution of style sheets
More informationDetailed Format Instructions for Authors of the SPB Encyclopedia
Detailed Format Instructions for Authors of the SPB Encyclopedia General Formatting: When preparing the manuscript, the author should limit the use of control characters or special formatting. Use italics
More informationWeb Site Design and Development Lecture 6
Web Site Design and Development Lecture 6 CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM Inheritance Before we talk about font properties, it needs to be known that font properties are inherited by the descendants
More information