Presentation on theme: "HTML Introduction DSC340 Mike Pangburn. What is HTML? HTML: Hyper Text Markup Language The predominant markup language for web-page design. A markup."— Presentation transcript:
What is HTML? HTML: Hyper Text Markup Language The predominant markup language for web-page design. A markup language is a set of markup tags. File extensions:.html,.htm Information stored in an html ﬁle can be viewed in a browser.
Why HTML? It is platform independent: Pages can be viewed using a variety of different computers and browsers. It allows convenient linking from one page to another. Html ﬁles are small since they store the structure of the document, not its precise appearance. Html is open to everybody. It is not owned by a company.
An HTML document HTML document is a plain text (ASCII) ﬁle that contain code that deﬁnes a web page. We can peak at the code for any page using the “View → Page Source” option in a browser. The contents can be divided into two categories: Content: material which the user sees when visiting the page. Meta-information: information about the document: its structure, formatting, etc. Meta-information is distinguished from content by tags.
HTML tags A tag identiﬁes a page element’s type, format, and appearance. Unknown tags are ignored. This rule allows new tags to be introduced without causing problems for older browsers. It also means you need to be careful to spell tag names correctly! Tags are enclosed in angle brackets Content affected by the tag Tags usually come in pairs: an opening tag and a closing tag. Some exceptions: tag has optional tag has no corresponding Tag names are case-insensitive. Style recommendation: Be consistent.
Nesting of tags Opening and closing tags define regions affected by the tags. These regions must nest, not overlap. Yes: Some text more text and more. No: Some text more text and more.
Structure tags There are important one-per-document tags: Tells the browser that this is an HTML document. All other tags are placed in html tag. Contains information about your page. Everything in the head portion is meta-information, not content. Contains the content of your page.
Special tags within HEAD deﬁnes the title of the document. Example: Title of my web-page This tag is optional but should always be included to assist the user in navigating the browser’s history list. deﬁnes style information for an HTML document. (Will spend more time on this later!) provides metadata about the HTML document. Example: Specifies keywords to assist indexing of the page by search engines
Format: bold, italic, and underline Bold Italic Underline You can apply more than one e.g., Just Do It! produces: Just Do It!
Heading tags Main heading - Formats the enclosed text as a prominent large, bold heading. heading style a bit less large than h1 heading style a bit less large than h2 heading style a bit less large than h3 heading style a bit less large than h4 heading style a bit less large than h5 Examples: This is header 1 This is header 6
Other HTML tags Horizontal rule. Draws a thin solid horizontal line on the web page. No closing tag. Line break. Creates a line break (effectively hitting a “return key”). Use this where the extra line spacing of a paragraph tag is not desirable. No closing tag. Comments: these consist of any text enclosed within. Their purpose is to enlighten the web programmer reading the HTML. They do not appear in the rendered page.
The “font” tag The tag. In the early days of web design, this tag was introduced to allow the web programmer to control the font family, typeface, color, etc. This tag is now considered obsolete. Cascading style sheets (CSS) provide much better control over style and compatibility. We will cover CSS later However, many web pages still use this tag for simple effects such as text size and color. Large, red text
Special symbols What if we want to show a math relationship as: 0 r So the XHTML would be 0 < p > r Special characters < displays as < > displays as > & displays as & non-breaking space &mdash displays as -
Links with anchor text Two sides of a hyperlink Anchor text The highlighted text in the current document Hyperlink reference The URL address Usage anchor text e.g., Click here displays as: Click herehere
Links and URLs The link target, or href (hypertext reference) is in the form of a URL: Uniform Resource Locator. A URL has 3 components, not all of which need to be supplied in every reference: A protocol An Internet address (either name or IP number) A file path Example: http://infographics.uoregon.edu/campusMaps/nightmap.pdf
URL address The Internet address portion of a URL can be either a name, e.g. www.uoregon.edu, or an IP address, e.g. 184.108.40.206 If omitted, the address of a URL reference within an HTML page is assumed to be the same as the address for the document containing the link. Thus if the address is omitted from a link in a web page, the link refers to a document on the same server that served that page. A URL without an address portion can be either absolute or relative, as explained next.
URL file path The file path portion of a URL optionally specifies the chain of directories (folders) in which the document is located, and the name of the file itself. The directory names in the chain are separated by slash characters. If the file name portion of the path is omitted, then it defaults to a value that is defined by the server, typically index.html. Example: the URL http://www.myplace.com/shopping/fruit/http://www.myplace.com/shopping/fruit/ includes no filename, so a (typical) webserver inserts the default name: http://www.myplace.com/shopping/fruit/index.html
Relative vs Absolute links If a URL omits the Internet address portion, then the file path portion can be either relative or absolute. Relative provides path directions to the browser relative to the folder where the browser is currently looking (i.e., relative to the current folder) Absolute provides path directions to the browser starting from the absolute top of the folder hierarchy
Example Let’s put link with file Frames.html to Catalog2014.pdf When viewing Frames.html the browser must be in the products folder Relative link our 2014 catalog Absolute link (directions start from absolute top) our 2014 catalog sales public_html costs productsbrochures Frames.xls Parts.xls Catalog2014.pdfParts.htmlFrames.html financehome Absolute top of server’s “URL space”
Notes on Relative vs Absolute links How do you signal that you want your directions to be interpreted as the absolute or relative type? If the directions are absolute, then start the directions with a slash / If relative, do not start with slash When starting with the slash / the browser will go to whatever folder is configured in the webserver as the absolute top folder Sometimes that folder is set as public_html folder, but not always In the example, the server was configured such that the folder named home was the highest folder So, the starting slash / took the browser into the home folder It is standard to not type public_html within links, because it is by default the (only) web-accessible folder, so the web-server automatically directs the browser to that folder
Attributes in HTML Some tags can be qualiﬁed by attributes that provide needed additional information or change the default properties of the tag. The general syntax is: Some text Attributes are specified within the angle brackets following the opening tag name. Examples: (default justification is left)
Showing pictures Image Tag Format: 1. src short for source 2. alt gives text to print when image can’t be loaded 3. Absolute and relative pathname rules apply This tag will cause an image simply to be displayed on the Web page
Clickable pictures Pictures can be used as links by combining tag with an anchor tag Here, the picture becomes the “hot spot” for the anchor tag (rather than text) The browser will display the picture “thumbnail.jpg” then allow the user to click on the picture as a link to the file “fullsize.jpg”
Handling tables Table: Rows: Cells: Caption: Column headings: Example: A B C Dan Jen Pat Mary Tim Bob Will display as: A B C Dan Jen Pat Mary Tim Bob
Controlling text with tables Tables can control arrangement of information on a page e.g., a series of links listed across the top of the page could be placed in a one-row table to keep them together -Use no borders, you get alignment and order -If the window is too small to display all the links, table keeps them in a row and a scroll bar is added -If the tags are not in a table, the links will wrap to the next line instead
Handling lists Unnumbered (bulleted) list: - and tags begin and end the list - and tags begin and end the items within the list Ordered (numbered) list: - and tags begin and end the list -Uses the same tags Sublists: Insert lists within lists (between tags)
Lists Example Hydrogen, H, 1.008, 1 Helium, He, 4.003, 2 good for balloons makes you talk funny Lithium, Li, 6.941, 2 1 Beryllium, Be, 9.012, 2 2 Gets rendered as (browser indents each list some) 1. Hydrogen, H, 1.008, 1 2. Helium, He, 4.003, 2 Good for balloons Makes you talk funny 3. Lithium, Li, 6.941, 2 1 4. Beryllium, Be, 9.012, 2 2