Basics of HyperText Markup Language

Basics of HyperText Markup Language
HTML: Basics of HyperText Markup Language Internet Tecnology

Markup Language (ML): What is it?
Defines meaning and appearance of text Meaning → what the text represents (e.g., title, author) Appearance → how the text is displayed Can consist of whatever tags and rules desired As long as it has an agreed-upon method for interpretation by the client. Underlies all word processors, publishing software, etc. Example <doc> <title>Do you know how lucky you are?</title> <para>You are lucky because: <list> <list_item>You are healthy <list_item>People love you <list_item>… </list> </doc> Internet Tecnology

ML: Physical vs. Semantic Markup
11/11/2018 ML: Physical vs. Semantic Markup Physical (descriptive) Appearance is strictly defined Specifies precisely how content is to be displayed Limited flexibility Must abide by existing tags Examples Many tags in HTML , WYSIWYG editor (e.g., Dreamweaver, MS Word) Semantic (logical) Emphasizes structure or meaning over appearance Does not specify how the content is to be displayed Appearance is often handled by a separate mechanism (e.g., CSS) Flexibility in defining meaning Can define one’s own set of tags Ideal for storing metadata and database information XML, SGML Internet Tecnology

ML: SGML, HTML, & XML Markup Languages
11/11/2018 ML: SGML, HTML, & XML Markup Languages Comprised of tags and rules for their use SGML - Standard Generalized Markup Language An ISO-standard technology for defining generalized markup languages for documents SGML Resource ( Designed to enable sharing of machine-readable documents HTML - HyperText Markup Language An application of SGML, used for a web document More loosely defined than SGML & XML XML - eXtensible Markup Language A set of rules for encoding documents in machine-readable form XML FAQ: Emphasize simplicity, generality, and usability over the Internet An abbreviated version of SGML (more restrictive) Easy to define your own document types and tags XML-based Internet Applications/Languages RSS, Soap, XHTML Internet Tecnology

HyperText Markup Language: History
11/11/2018 HyperText Markup Language: History General Markup Language (1960’s, IBM) GML driven by large publishing jobs Standardized General Markup Language ISO standard developed by ANSI (1986) Large, powerful tag set Applications in library, government, & commerce Tim Berners-Lee borrowed from SGML to support hypertext project (1990) Why it has worked Instance of SGML, but fewer options to negotiate Smaller tag set nurtured authoring community relatively easy to use HTML Standards HTML most basic tags (20 elements), 1991 HTML forms support, 1995 HTML vendor/browser specific tags crept in, January 1997 HTML 4.0 – frames introduced, December 1997 HTML 5.0 – published as a working draft in 2008, finalized in October multimedia support, interoperability, intended to subsume XHTML Internet Tecnology

HTML: Overview What is it? HTML Components HTML Tag Types
11/11/2018 HTML: Overview What is it? A way of describing how text and images should be displayed by Web browsers Good guide: HTML Components HTML document consists of elements Elements consist of text enclosed by tags Some elements are defined by attributes These attributes usually have values HTML Tag Types Semantic/Logical To divide the document into logical units or indicate the semantics of a piece of text e.g., <head>, <body>, <h1> Physical To format the display of information e.g., <b>, <font>, <i> Hyperlink To link to other items e.g., <a>, <img> HTML Document Element Element Element <tag attr=“value”>text</tag> Internet Tecnology

HTML: Syntax Tag starts with <, ends with >
11/11/2018 HTML: Syntax Tag starts with <, ends with > e.g., <html> Tags are not case sensitive e.g., <html> same as <HTML> Most tags enclose the marked up text e.g., <h1>This is a heading</h1> There are some that don’t need an end tag e.g., <p>, <br> Anchor tag is used to “link” documents <a href=" Yang’s Home Page</a> Blank lines and spaces ignored when interpreting HTML document Internet Tecnology

HTML: A Basic Web Page <html> <head>
11/11/2018 HTML: A Basic Web Page <html> <head> <title>This is a web page</title> </head> <body> This text is displayed on the screen </body> </html> Internet Tecnology

HTML: Basic tags Tags Attributes <p> - paragraph
11/11/2018 HTML: Basic tags Tags <p> - paragraph <b> - bold <i> - italics <h1>, <h2>,…<h6> - headers <a> - anchor <img> - image Many tags have ending tags </b>, </a>, </i>,</h1> Attributes Annotations to tags Provide more detail They can be mandatory <a href=“file.html”> <img src=“picture.gif> Or optional <body bgcolor=“red”> <tr width=“60” align=“right”> Internet Tecnology

HTML: Linking Documents
11/11/2018 HTML: Linking Documents Linking to another document <a href=“URL to page”>Anchor Text</a> e.g., <a href=" Yang’s Home Page</a> Linking to a specific place in a document Use the NAME attribute of <a> tag to designate the target location in a document <a name=“wk1”>Week 1</a> Link to the named anchor (e.g., Week 1) with #name_attribute-value (e.g., wk1) <a href=“schedule.htm#wk1”>wk1</a> Opening the linked document in a specific window. Use the TARGET attribute of <a> tag to designate the target window <a target=“window1” href=“schedule.htm">IT Schedule</a> Will load schedule.htm to the browser window named “window1” If such window does not exist, it will open a new browser window named window1. Target = “_blank”  load into a new, unnamed window Target = “_self”  load in place of the current document Internet Tecnology

HTML: Nesting Tags Nesting Tags
11/11/2018 HTML: Nesting Tags Nesting Tags Placing of one set of tags inside another When you want the effect of more than one tag e.g., bold, italicized and centered text Tags close in the reverse order of open sequence Open: <P>, <B>, <I> Close: </I>, </B>, </P> Tags can be “nested”, but there are some restrictions… Make sure tags don’t overlap! <b><i>This text is bold and italics</b></i> Not nested correctly and may not display correctly Correct: <b><i>This text is bold and italics</i></b> Internet Tecnology

HTML: Absolute vs. Relative URLs
11/11/2018 HTML: Absolute vs. Relative URLs Absolute URL Contains the entire path to the document <a href=“ or <a href=“/~kiyang/teaching/IT/s17/schedule.htm”> Says to start from the web server root (/) and find this file (schedule.htm) Relative URL Contains the path to the document relative to the current place in the file structure <a href=“schedule.htm”> Says to look in the same directory as the current document for the file (schedule.htm) Use BASE HREF tag (in HEAD section) to apply different server root <base href= Internet Tecnology

Creating/Editing HTML
11/11/2018 Creating/Editing HTML Options for editing HTML documents Text Editors Edit the HTML source code directly (e.g., Notepad, Pico) HTML Editors Like text editors, edit source codes but with the aid of tag tools (e.g., HomeSite) Word Processors Save as or Export to HTML document (e.g., MS Word) WYSIWYG Editors GUI edits generate the source code (e.g., Dreamweaver, Front Page) So why learn HTML code? WYSIWYG (and Word Processors) adds a lot of proprietary codes Harder to edit without the software the second time Cannot always control the structure and layout View Source is the best teaching tool Internet Tecnology

Publishing HTML Content Creation Mode #1 Content Creation Mode #2 Edit
11/11/2018 Publishing HTML Content Creation Mode #1 Create HTML pages on the local PC using Notepad, Dreamweaver, etc. Upload the files to the server to be displayed on the Web Content Creation Mode #2 Create HTML pages directly on the server using pico, vi, etc. Edit Edit Publish Display Display upload Publish Internet Tecnology

HTML: Web Access Web Server Configuration
11/11/2018 HTML: Web Access Web Server Configuration Gives access to certain directories Designates a document root directory (where to look for files to serve) On WIDIT, document root is /var/www e.g.,  /var/www/lis/ Most servers designate personal web document directory /home/USERID/public_html/  /~USERID/ e.g.,  /home/kiyang/public_html/index.html Web Server /var/www/ /home/ No Yes /home/USERID/ Yes /home/USERID/public_html/ Internet Tecnology

Web Design 101 Consider your audience
11/11/2018 Web Design 101 Consider your audience What type of hardware & software do the intended users have? PC vs. Mac, Internet Explorer vs. Chrome Plan the Information Architecture of your website Lay out the website architecture in your mind or on paper first. Internet Tecnology

Web Design 101 Put navigation links on every page
11/11/2018 Web Design 101 Put navigation links on every page No more than 3 clicks to useful information Use descriptive links (i.e., anchor text) Tell people where they are going! Make the website portable Use relative URLs if possible Consider the page load speed Use thumbnail images that will enlarge when clicked Practice user-centered design FAQ, Date of last update, link to the website author/administrator Providing a sense of “place” is important Consistent look & feel Easy to comprehend visual layout Implement a dynamic & interactive website (via HTML form & CGI) Feedback mechanism Protect information with Log-in Automated services Internet Tecnology

Basics of HyperText Markup Language

Similar presentations

Presentation on theme: "Basics of HyperText Markup Language"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Basics of HyperText Markup Language

Similar presentations

Presentation on theme: "Basics of HyperText Markup Language"— Presentation transcript:

Similar presentations

About project

Feedback