1 Objectives To examine the basics of Web

1 Objectives  To examine the basics of Web

1 Objectives To examine the basics of Web authoring tools (text-based editing or graphical-based editing programs). To discover which web authoring software is best suited for each users needs. To learn the basics of the various web languages. 2

Main Menu Web Publishing Markup Language Web Authoring Software 3 Web Publishing 4 Web Publishing Allows Internet users to view HTML through the use of a web browser Is the process of using a web browser to view a

document stored on another computer or server web browsers are programs such as Internet Explorer Safari FireFox 5 Web Publishing Is usually accomplished by using two methods: designing a web page manually using a text editor users encode or markup the plain text in a document turning it into a markup language

designing a web page authoring tool or software such as Adobe Dreamweaver authoring tool: software used in creating a web document markup: (or encoding) the symbols or characters added to plain text in a document to indicate different attributes and elements markup language: a coding system used to structure text files in a document translating it into a web document 6 Introduction Web Publishing

Creating a web page web authoring software Adobe Dreamweaver Using Markup language

Cascading Style Sheets 7 Web Publishing Technology Has advanced in the last decade making it easier to author web pages with software opposed to manually writing or coding this has created a decreasing reliance on using markup languages in a text-based document Has advanced with the creation of What You

See Is What You Get (WYSIWYG) web page editors and software the most common approach to web page authoring HyperText Markup Language (HTML): a complex authoring language which converts text to a language so one may display materials (text, graphics, video) on a web page 8 Web Publishing Software For Windows includes: Microsoft Expression Web Adobe Dreamweaver

For Mac includes: iWeb BBEdit Aqua Data Studio Microsoft SharePoint Some free authoring tools include Beyond Press 3.0, Composer and Freeway 2.0. 9

Markup Language 10 Markup Languages Are a series of symbols combined with text to encode or format plain text in a document so a web browser can interpret the text and display it as a web page Include: HTML XML PHP

11 Markup Languages Are document based this means the markup languages interpret plain text documents such as WordPad this means they will only be translated into a web page if written in a text-based document 12 Hypertext Markup Language

Commonly known as HTML Is a markup language Was created in 1991 as a solution to web presentation challenges SGML could not cover SGML was not compatible with the concept of the Internet and moving information across different channels Is client side this means it is translated through the web browser Standard Generalized Markup Language (SGML): an international standard markup language giving the browser the ability to read a text file and display it to other users

13 Hypertext Markup Language Was created by the web community to facilitate the transfer of text documents to web pages Is a simplified form of SGML Can be used to develop a web page Requires a parser to be installed in a web browser Example: You can use HTML to specify which words you want to be bolded. The word bold in HTML would look like this: bold. 14

Parsers Interpret the marked up text document and display it as a web page Check the document to ensure the markup or encoding is done correctly Are generally built into browsers parser or processor: a computer program interpreting web page code and then separating it into the functional components, usually built into a browser 15 HTML Files Are plain text documents encoded for

interpretation by a browser into a web page Are embedded with code the code indicates different elements, tags, attributes HTML files are documents comprised of HTML elements HTML elements are comprised of HTML tags a tag is therefore the basic item, and an attribute is some extra detail such as how to align the content 16 17

Objectives To examine the basics of Web authoring tools (text-based editing or graphical-based editing programs). To discover which web authoring software is best suited for each users needs. To learn the basics of the various web languages. 18 Main Menu

Web Publishing Markup Language Web Authoring Software 19 Web Publishing 20 Web Publishing Allows Internet users to view HTML through the use of a web browser Is the process of using a web browser to view a document stored on another computer or server

web browsers are programs such as Internet Explorer Safari FireFox 21 Web Publishing Is usually accomplished by using two methods: designing a web page manually using a text editor users encode or markup the plain text in a document turning it into a markup language

designing a web page authoring tool or software such as Adobe Dreamweaver authoring tool: software used in creating a web document markup: (or encoding) the symbols or characters added to plain text in a document to indicate different attributes and elements markup language: a coding system used to structure text files in a document translating it into a web document 22 Introduction Web Publishing Creating

a web page web authoring software Adobe Dreamweaver Using Markup language

Cascading Style Sheets 23 Web Publishing Technology Has advanced in the last decade making it easier to author web pages with software opposed to manually writing or coding this has created a decreasing reliance on using markup languages in a text-based document Has advanced with the creation of What You See Is What You Get (WYSIWYG) web page

editors and software the most common approach to web page authoring HyperText Markup Language (HTML): a complex authoring language which converts text to a language so one may display materials (text, graphics, video) on a web page 24 Web Publishing Software For Windows includes: Microsoft Expression Web Adobe Dreamweaver For Mac includes:

iWeb BBEdit Aqua Data Studio Microsoft SharePoint Some free authoring tools include Beyond Press 3.0, Composer and Freeway 2.0. 25

Markup Language 26 Markup Languages Are a series of symbols combined with text to encode or format plain text in a document so a web browser can interpret the text and display it as a web page Include: HTML XML PHP 27

Markup Languages Are document based this means the markup languages interpret plain text documents such as WordPad this means they will only be translated into a web page if written in a text-based document 28 Hypertext Markup Language Commonly known as HTML

Is a markup language Was created in 1991 as a solution to web presentation challenges SGML could not cover SGML was not compatible with the concept of the Internet and moving information across different channels Is client side this means it is translated through the web browser Standard Generalized Markup Language (SGML): an international standard markup language giving the browser the ability to read a text file and display it to other users 29

Hypertext Markup Language Was created by the web community to facilitate the transfer of text documents to web pages Is a simplified form of SGML Can be used to develop a web page Requires a parser to be installed in a web browser Example: You can use HTML to specify which words you want to be bolded. The word bold in HTML would look like this: bold. 30 Parsers

Interpret the marked up text document and display it as a web page Check the document to ensure the markup or encoding is done correctly Are generally built into browsers parser or processor: a computer program interpreting web page code and then separating it into the functional components, usually built into a browser 31 HTML Files Are plain text documents encoded for interpretation by a browser into a web page

Are embedded with code the code indicates different elements, tags, attributes HTML files are documents comprised of HTML elements HTML elements are comprised of HTML tags a tag is therefore the basic item, and an attribute is some extra detail such as how to align the content 32 HTML Files Attributes: are combined with tags and further

specify the tag, for example, the tag

(which would create a table) has several attributes such as height, border, width and cell spacing Tags: tags indicate different structural parts of a web page or different formatting elements, such as a heading or a table; they usually begin with a left-angle bracket < and end with a right angle bracket > Elements: are different objects in a text document such as the title and body of a page 33 HTML Code

Includes tags think of a tag as a core element and an attribute as an extra detail such as how the content of the web page is aligned Allows users to create a web page with predefined tags. users cannot make up their own 34 HTML Example Displaying the word Hello in HTML:

indicates what structural element it is 1. 2. 3. Hello 4. 5. indicates to the browser this is an HTML file

Content / end tag 35 HTML Exercise Exercise Creating a document using HTML: 1. Start Notepad by clicking on the start menu, then move your mouse over All Programs, then over Accessories, then click on Notepad. 2. Type the following text into Notepad: Title of <!--page-separator--></p> <p>pageThis is my first homepage. This text is bold 3. Then save the file as mypage.htm 4. Open your Internet browser 5. Select Open in the File menu 6. Click Browse or Choose File and find your document 7. Select it and click Open and view your HTML document 36 Extensible Markup Language Also known as XML Is a series of guidelines allowing users to

create their own language, creating custom tags and then allows them to share it on the World Wide Web Was created in 1996 to help send richly structured documents over the web HTML is very structured and provides limitations as to what and how things can be displayed Is a more simple, condensed and flexible version of HTML 37 XML

Is designed to structure, carry and store data HTML was designed to display data on a web page Concentrates on what data is HTML concentrates on how the data looks Contains tags not predefined like in HTML allows users to create their own tags Does not replace HTML, but is its counterpart Requires a processing application to translate and ensure all tags are the correct format such as a parser

38 XML Documents Have four basic components: XML Schema or Document Type Definition (DTD) Style sheets XML Parser a document marked up (or encoded) using XML language 39

XML Schema or DTD Identify the elements and the rules for their use in the language only some XML languages use DTD a program defining all the elements of the document and the corresponding attributes, then checking the markup to make sure to follow its own code DTD is based on SGML some XML languages use XML schemas which have the same function as DTD but are based on XML

40 Style Sheets Are concerned with how the document looks markup languages only define the structure and different elements in the document Allow web page designers to design how a document is presented without having to add several new tags to indicate different elements on the page style sheet: sheet used by web designers describing how documents should be presented on a screen

41 PHP Is an acronym for Hypertext Preprocessor Is typically read by all browsers by a parser already installed in the browser Is referred to as middleware because it is a program allowing the web browser and the computer user to communicate 42 PHP Is server side

this means it is preprocessed through the server before being displayed to the user Is more flexible than HTML because it allows for greater customization 43 PHP example

are PHP instructions on their way echo PHP is very thrilling; echo command; lets the browser know what to display; usually commands end with a semicolon (;) ?> Closing tag; tells parser

there are no more php instructions 44 PHP Echo Command: php command telling the browser what to display on the web page Opening Tag: php command indicating to the browser there is php script to be interpreted Closing Tag: php command indicating to the browser there is no more php script to be interpreted on the page

45 Markup Language vs. Web Authoring Software Markup languages are independent and can be transferred to various software and programs allow more flexibility and customization software contains predefined tags restricting the user from creating unique tags to fit their needs users are also at liberty to specify the rules used by the tags 46

Markup Language vs. Web Authoring Software Markup languages have a reputation of being slow because of the large file size must pass through parsing and conversions increasing processing time and power 47 Markup Language Example If you have a MySpace page with a background other than the standard format

provided for you, then you can see a markup language (HTML in particular) in action. 48 Cascading Style Sheets Also known as CSS Allow users to control the layout and design of a web page Is the device for supplying types of style instructions to elements in a XML (or any other markup language) document Is a different language than HTML, but works with HTML to make it more visually appealing

49 Cascading Style Sheets Example: If you were creating a web page, you would use HTML to indicate a certain sentence is a primary heading, however you would then use CSS to format the heading. You used CSS to make the heading bold, underlined, green font and positioned in the middle of the page. style: a guideline explaining how to format a segment of a web page 50

Advantages of CSS CSS: allows more formatting than HTML applied to a background of a document allows a user to decide how and if it is tiled takes up less space than HTML a web page formatted with CSS will take less time to load 51 Advantages of CSS Makes updating a website easier because you apply the same formatting to each

sheet basically a user only has to update one sheet and the changes to the remaining sheets Example of tiling: tiling the background on your computer screen is a good representation of tiling tile: repeating the image in different segments in a background 52 Cascading Style Sheets Example H1 { color: blue }

P { font-size: 12pt; font-face: Arial, sans-serif;} This sheet contains two rules: 1. The first makes all of the headings blue 2. The second makes the font 12pt and Arial H1= References the heading P = References the paragraph in a document

53 Cascading Style Sheets Keep style instructions separate from the actual content and structure of the document Have two main parts: the selector the declaration 54 The Selector Detects which elements are effected by the specifications

in the example the H1 and P are the selectors; the selector H1 indicates the font of heading 1 in the document is blue H1 { color: blue } P { font-size: 12pt; font-face: Arial, sans-serif, } 55 The Declaration Is the actual set of instructions applied to the selector In the example above is everything except H1

and P Can indicate several different traits to be administered to the selector Must be separated by a semi colon if it contains more than one instruction H1 { color: blue } P { font-size: 12pt; font-face: Arial, sans-serif; } 56 Web Authoring Software 57 Web Authoring Software

Has advanced recently providing users WYSIWYG web page editing enables users to create web pages with little or no HTML knowledge because of built in advanced design tools and controls Is popular with the use of the following programs: Microsoft Expression Adobe Dreamweaver 58 WYSIWYG Programs

Are easier to use because they make decisions for you when designing a web page there are numerous specifications needed to be made in order for a page to look as the designer desires these programs assume many decisions in the process of designing which makes them work faster than programs not enabled with WYSIWYG technology this can also be a limitation 59 Microsoft Expression

Is a widely used authoring tool for personal and professional use FrontPage was discontinued in 2006 to make way for the new authoring tools available this was previously the widely used publishing tool Is the next generation of authoring tools Enables users to create a web page with more sophisticated attributes 60 Adobe Dreamweaver

Is the most popular authoring tool Is a good choice for professional web designers Offers the option of designing and using a visual layout interface or a streamlined coding environment 61 Web Authoring Software Advantages Include: saving time not having to know intricately HTML, XML or PHP

looks professional easily manipulated users can modify attributes on the page quicker and easier than working with a web authoring language 62 Web Authoring Software Disadvantages Include: more customization base and intricate knowledge of HTML, XML or PHP

can design a page to exact specifications 63 Resources

(1994-2008). Retrieved October 28, 2008, from World Wide Web Consortium: http://www.w3.org/ A Gentle Introduction to SGML. (1994). Retrieved October 28, 2008, from http://www.isgmlug.org/sgmlhelp/g-sg.htm ADE Glossary. (1996-2005 ). Retrieved October 28, 2008, from Accessibility in Distance Education: http://www.umuc.edu/ade/glossary.html Introducing Microsoft Office SharePoint Designer 2007. (2008). Retrieved October 28, 2008, from Microsoft Office Online: http://office.microsoft.com/en-us/sharepointdesigner/HA10074 0831033.aspx Lau, P. Y. (2003). Practical Web Technologies. . AddisonWesley. McFarland, D. S. (2006). CSS: The Missing Manual. O'Reilly.

Megginson, D. (2005, March 25). XML Performance and Size. Retrieved October 28, 2008, from informIT: http://www.informit.com/articles/article.aspx?p=367637 64 Resources

Richmond, A. (2008). Introduction to HTML . Retrieved October 28, 2008, from Web Developer's Virtual Library: http://www.wdvl.com/Authoring/HTML/Intro/ Robbins, J. N. (2006). Web Design in a Nutshell. O'Reilly. Standards for HTML Authoring for the World Wide Web. (1996 - 2006). Retrieved October 28, 2008, from WDG Web Design Group: http://htmlhelp.com/design/standards.html Stark, J. (2007). Web Publishing with PHP and FileMaker 9 . Sams. Windows WWW Related Tools . (n.d.). Retrieved October 28, 2008, from http://www.Webcom.com/html/win_index.shtml XML Advantages & Disadvantages. (2003-2004). Retrieved

October 28, 2008, from The UK Web Design Company: http:// www.theukWebdesigncompany.com/articles/xml-advantagesdisadvantages.php XML Tutorial SGML, HTML and XML. (2000-2008 ). Retrieved October 28, 2008, from C# Computing: http://csharpcomputing.com/XMLTutorial/Lesson2.htm 65 Acknowledgements Production Coordinators Amy Hogan Jessica House Meghan Blanek Brand Manager

Megan OQuinn Graphic Designer Daniel Johnson Technical Writer Jessica Odom Executive Producer V.P. of Brand Management Gordon W. Davis, Ph.D. Clayton Franklin MMXIV CEV Multimedia, Ltd.

Recently Viewed Presentations

  • Chapter 24

    Chapter 24

    See pages 673-674 for more details. Mixed construction, faulty predication and parallelism Mixed construction refers to sentences that seem to shift sentence structure. Faulty predication happens when the second part of a sentence seems to be on a different topic...
  • Making Money On the Sidelines: Package Your Passion

    Making Money On the Sidelines: Package Your Passion

    Making Money On the Sidelines: Package Your Passion AAPAR-AAHPERD Convention San Diego, CA 4.1.11
  • The Eyak Corporation & Subsidiaries Ethics Training 2014

    The Eyak Corporation & Subsidiaries Ethics Training 2014

    The following slides also contain cross-references to the relevant section of the Code of Ethics (i.e., Stds. §__) for further inquiry and review. Compliance with the Code of Ethics is essential to our continued success. Report any violations or suspected...
  • Agenda Item - Nevada Department of Education

    Agenda Item - Nevada Department of Education

    Executive Summary. NRS 385A.740 requires a school district or a sponsor of a charter school to apply to the State Board on behalf of a school seeking approval to be rated using the alternative performance framework.
  • Phylum Cnidaria - Conackamack Middle School

    Phylum Cnidaria - Conackamack Middle School

    Phylum Cnidaria Pages 307-311 CNIDARIANS- "STINGING CELLS" SEA JELLIES SEA ANEMONES CORALS HYDRA Just the facts… CARNIVORES STINGING CELLS CALLED NEMATOCYSTS HOLLOW CENTRAL CAVITY Body Characteristics Body Symmetry: Radial Cell Organization: Cells form into muscle-like tissues, no organs or organ...
  • VHDL 3 Finite State Machines FSM

    VHDL 3 Finite State Machines FSM

    VHDL 5FINITE STATE MACHINES (FSM) Some pictures are obtained from . FPGA Express V. HDL Reference Manual, it is accessible from the machines in the lab at /programs/Xilinx foundation series/VDHL reference manual
  • Patterns of Congenital Abnormalities

    Patterns of Congenital Abnormalities

    Arial Wingdings Arial Black Lucida Sans Unicode Ripple Patterns of Congenital Abnormalities Causes of human congenital anomalies Down syndrome (Trisomy 21) Female Trisomy 18 Female with trisomy 13 Young male with Klinefelter syndrome (XXY trisomy) Structural chromosomal abnormalities Cri-du-chat syndrome...
  • Chemical Bonding - GST BOCES

    Chemical Bonding - GST BOCES

    Chemical Bonding What is a Bond? Force that holds atoms together Results from the simultaneous attraction of electrons (-) to the nucleus (+) Breaking/Forming Bonds When a bond is broken energy is absorbed Endothermic When a bond is formed energy...