ART 379 Web Design. HTML, XHTML & CSS: Introduction, 1-2

Transcription

1 HTML, XHTML & CSS: Introduction, 1-2

2 History: 90s browsers (netscape & internet explorer) only read their own specific set of html. made designing web pages difficult! (this is why you would see disclaimers at the start of sites that said best viewed in IE 3.0 )

3 History: 90s browsers (netscape & internet explorer) only read their own specific set of html. made designing web pages difficult! (this is why you would see disclaimers at the start of sites that said best viewed in IE 3.0 ) W3C, the World Wide Web Consortium, pushed for standardization, first with HTML 3.2, then HTML 4 and CSS. (And now HTML 5 and CSS3!)

4 History: 90s browsers (netscape & internet explorer) only read their own specific set of html. made designing web pages difficult! (this is why you would see disclaimers at the start of sites that said best viewed in IE 3.0 ) W3C, the World Wide Web Consortium, pushed for standardization, first with HTML 3.2, then HTML 4 and CSS. (And now HTML 5 and CSS3!) CSS (cascading style sheets) allows for rules to be applied to a whole site, not just to a single page. Any old formatting tags are now considered deprecated. Use sparingly.

5 XHTML: the mix of XML + HTML XML is the W3Cs answer to creating a more flexible platform on which to write pages. HTML alone doesn t allow for easy expansion (new tags, etc).

6 XHTML: the mix of XML + HTML XML is the W3Cs answer to creating a more flexible platform on which to write pages. HTML alone doesn t allow for easy expansion (new tags, etc). Browsers aren t all up to date with the new standards though, and in order for old sites to still be read, W3C rewrote HTML in XML. The combination = XHTML

7 XHTML: the mix of XML + HTML XML is the W3Cs answer to creating a more flexible platform on which to write pages. HTML alone doesn t allow for easy expansion (new tags, etc). Browsers aren t all up to date with the new standards though, and in order for old sites to still be read, W3C rewrote HTML in XML. The combination = XHTML XHTML is more strict. Remember your quotation marks. No capital letters. The standard for US accessibility regulations. Works best with the newest browsers.

8 How This Book Works: page 23, Figure i.1, i.2, i.3

9 Vocabulary Markup: information about the content of a site.

10 Vocabulary Markup: information about the content of a site. 3 principle types: Elements, Attributes, & Values

11 Vocabulary Markup: information about the content of a site. 3 principle types: Elements, Attributes, & Values labels that identify and structure the web site

12 Vocabulary Markup: information about the content of a site. 3 principle types: Elements, Attributes, & Values regular: surround text empty: no text content definition of <em>ephemeral</em> <img src= blueflax.jpg />

13 Vocabulary Markup: information about the content of a site. 3 principle types: Elements, Attributes, & Values regular: surround text empty: no text content definition of <em>ephemeral</em> <img src= blueflax.jpg /> opening tag affected text closing tag

14 Vocabulary Markup: information about the content of a site. 3 principle types: Elements, Attributes, & Values contain information about the data located inside an element s opening tag

15 Vocabulary Markup: information about the content of a site. 3 principle types: Elements, Attributes, & Values contain information about the data located inside an element s opening tag <img src= blueflax.jpg width= 300 />

16 Vocabulary Markup: information about the content of a site. 3 principle types: Elements, Attributes, & Values always in quotes <img src= blueflax.jpg width= 300 /> numbers (pixels), percentages, lowercase predefined names

17 Identify the parts: <link rel= stylesheet type= text/css media= screen href= blueflax.css />

18 Identify the parts: <link rel= stylesheet type= text/css media= screen href= blueflax.css /> Element

19 Identify the parts: <link rel= stylesheet type= text/css media= screen href= blueflax.css /> Attribute

20 Identify the parts: <link rel= stylesheet type= text/css media= screen href= blueflax.css /> Value

21 Identify the parts: <link rel= stylesheet type= text/css media= screen href= blueflax.css /> Element Attribute Value

22 Block vs. Inline Elements can be block or inline. Block: will begin on a new line on your site. Inline: will only affect text or other inline elements. Will not start on a new line.

23 Block vs. Inline page 30, Figure 1.6

24 Parents and Children If one element contains another, it is considered to be a parent of the enclosed, or child element. Any elements contained in the child element are considered descendants of the parent element. This differentiation will become much more important later, when you start using CSS to style your websites. For now, just be aware of the distinction.

25 Nesting the most important thing to remember is to keep nested elements in the correct order: <p>...of <em>ephemeral</em></p>

26 Nesting keep nested elements in the correct order: <p>...of <em>ephemeral</em></p> NOT <p>...of <em>ephemeral</p></em>

27 Translations! the default structure of a site is: in the order you write it! in a column from the top left

28 Translations! the default structure of a site is:

29 Links, Images, other non-text Content you store this data elsewhere, and reference it in your XHTML. <img src= /blueflax.jpg width= 300 />

30 Absolute vs. Relative URLs there are two ways to reference a link: either from files you have uploaded yourself OR from a site elsewhere. <img src= width= 300 /> the example above is an absolute link. what does that mean?

31 Absolute vs. Relative URLs there are two ways to reference a link: either from files you have uploaded yourself OR from a site elsewhere. <img src= /blueflax.jpg width= 300 /> the example above is a relative link.

32 Absolute vs. Relative URLs there are two ways to reference a link: either from files you have uploaded yourself OR from a site elsewhere. <img src= /blueflax.jpg width= 300 /> the example above is a relative link. what does that mean? what does the / mean in the code? why would you use this? what would my code be if my images were in a folder named images?

33 Organizing Files Organization is going to be key as your web site grows Create a folder on your desktop Inside, create a folder named mywebsite images

34 General Rules use only lowercase letters for the names of files and folders use the proper extension for each page:.html review that you have closed all open tags and quotes when you find you have a problem. keep your files organized!

35 Review: How do you upload your html file to be viewed online? What must your homepage be named? How can you see the code of every website?

36 Quick Site! Utilizing Castro s example, edit the content to make it your own.

37 Practice Continue with the html basics on the W3 schools basics website. You can find the link on our tumblr site: