edu653 - misty's flickr ppt assignment: how does xhtml make a web page?
TRANSCRIPT
How Does XHTML Make a Web Page?
A Brief Overview
Misty KitzulCentral Michigan University
EDU653 – Fall 2014
What is XHTML? XHTML is short for
Extensible Hypertext Markup Language.
Web browsers read text documents written in XHTML format to display web pages.
It is a markup language, NOT a programming language, so it is easy to learn.
“17/02/2009 (Day 3.48) - HTML” by Alan. Creative Commons. Some rights reserved. Retrieved from https://www.flickr.com/photos/kaptainkobold/3286315503
How Does XHTML Work? XHTML works with CSS (Cascading Style
Sheets) to make pretty web pages. XHTML provides structure and content to a
web page while CSS tells the web browser how to display the content of the page.
The web browser reads the code and then follows the directions such as “show this image” or “display this header text” or “apply this CSS style to the paragraph”.
Why Do Web Pages Look Different on Different Browsers? Unlike print, where each copy is
identical, web documents may display differently in different browsers because browsers decide how to display similar elements.
Why Do Web Pages Look Different on Different Browsers? The XHTML code says
“This is a header. Whatever you do with headers, to do this text.” and the browser complies.
The browser reads the code and displays visually what the code asks it to display.
“En clases HTML y CSS” by Cristian Labarca. Creative Commons. Some rights reserved. Retrieved from https://www.flickr.com/photos/huasonic/1443767744
Different Web Browsers Produce Different Results Sometimes this produces less than
perfect results.
“css mess” by Mikel. Creative Commons. Some rights reserved. Retrieved from https://www.flickr.com/photos/atzu/4365152223
Why Use XHTML and CSS If They Display Differently in Different Browsers?
The beauty of the web is that it is fluid and not set in stone. Web pages help people share information and browsers display that information in a manner readable by the end user.
Why Use XHTML and CSS If They Display Differently in Different Browsers?
Browsers might not be only a computer web browser, such a FireFox, Chrome, Safari, or Internet Explorer but also browsers such as a screen reader for the blind, a smart phone browser, or a browser inside of an automobile. All of these different browsers display the same information, just differently.
So How Does XHTML Code Work? A web document is actually a text
document which contains XHTML coding.
The browser reads properly formatted code, gathers the images and resources needed, and then visually displays the page as best as it can.
How is an XHTML Document Structured? The structure of
the document includes a head section and a body section.
“html tattoo” by Daniel. Creative Commons. Creative Commons. Some rights reserved. Retrieved fromhttps://www.flickr.com/photos/daniello/422213306/
The <head> section contains information about the web page such as author, keywords, and the title.
The <body> section contains the content of the page.
“html-source“ by Jason Morrison. Creative Commons. Some rights reserved. Retrieved from https://www.flickr.com/photos/jason-morrison/2150499966
How is an XHTML Document Structured?
How Does an XHTML Tag Work? XHTML tags mark up elements on the web
page telling the browser what the content inside of the tags is. For example, before and after some content you would write an opening tag and a closing tag. For example:
<h1>This is a big header.</h1><h2>This is a smaller header</h2><p>This is a paragraph. Yes, it is.</p>
Fun with XHTML Tags Here’s a few other tags you could use:
“html tag italicized” by Jesper Rønn-Jensen. Creative Commons. Some rights reserved. Retrieved from https://www.flickr.com/photos/jesper/346483297“<embed>” by Luis. Creative Commons. Some rights reserved. Retrieved from https://www.flickr.com/photos/liamngls/413522957
Use Italics (Normally for Text)
Embed an Object into the Web Page, Such as a Video
XHTML Tags with CSS XHTML tags are really simple, but you can
spice them up with attributes which provide additional information, such as what CSS class style to apply to text to make it pretty.
“P Element - (X)HTML Diagram” by Jared Stein. Creative Commons. Some rights reserved. Retrieved from https://www.flickr.com/photos/5tein/2164379600
Want to Learn More about XHTML and CSS? Now that you have
had a taste of XHTML and CSS, why not learn more about it? Pick up a book on web design, or visit a website which teaches how to code web pages.
“Head First HTML” by ario_. Creative Commons. Some rights reserved. Retrieved from https://www.flickr.com/photos/ario/408033716
Web Sites to Learn HTML/CSS Dash – General Assembly
https://dash.generalassemb.ly/ CodeCademy
http://www.codecademy.com W3 Schools
http://www.w3schools.com