cswb 110 tutorial1 part a
DESCRIPTION
TRANSCRIPT
![Page 1: CSWB 110 Tutorial1 Part A](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54d312bb4a7959fc708b45b5/html5/thumbnails/1.jpg)
XP
1
CSWB 110 HTML / XHTML
Tutorial 1.1 and 1.2 up to lists
![Page 2: CSWB 110 Tutorial1 Part A](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54d312bb4a7959fc708b45b5/html5/thumbnails/2.jpg)
XP
2
History of the Internet
• 1969 Advanced Research Projects Agency Network (ARPANET) Begins
• 1989-90 the World Wide Web (WWW) Begins
• 1993 Mosaic is Released
• 1994 Netscape is Released
• 1995 Internet Explorer is Released
![Page 3: CSWB 110 Tutorial1 Part A](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54d312bb4a7959fc708b45b5/html5/thumbnails/3.jpg)
XP
3
Development of the Word Wide Web
Timothy Berners-Lee at the CERN nuclear research facility near Geneva, Switzerland, in 1989.
He developed a system of interconnected hypertext documents that allowed their users to easily navigate from one topic to another
HTML - language of the Web HTTP – protocol to send and receive Web pages
![Page 4: CSWB 110 Tutorial1 Part A](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54d312bb4a7959fc708b45b5/html5/thumbnails/4.jpg)
XP
4
HyperText Documents
An entire collection of linked documents is referred to as a Web site.
The hypertext documents within a Web site are known as Web pages.
A Web page can contain text, graphics, audio, video.
These are separate files that also reside with the html file
![Page 5: CSWB 110 Tutorial1 Part A](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54d312bb4a7959fc708b45b5/html5/thumbnails/5.jpg)
XP
5
Web Servers and Web Browsers
A Web page is stored on a Web server
The browser or client displays the Web page
The Web page is written in the HTML language
They communicate with the HTTP protocol
![Page 6: CSWB 110 Tutorial1 Part A](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54d312bb4a7959fc708b45b5/html5/thumbnails/6.jpg)
XP
6
Search.htm
![Page 7: CSWB 110 Tutorial1 Part A](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54d312bb4a7959fc708b45b5/html5/thumbnails/7.jpg)
XP
7
search.htmimage.jpg
www.palomar.edu/search.htm
![Page 8: CSWB 110 Tutorial1 Part A](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54d312bb4a7959fc708b45b5/html5/thumbnails/8.jpg)
XP
8
How is the home page loaded?
![Page 9: CSWB 110 Tutorial1 Part A](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54d312bb4a7959fc708b45b5/html5/thumbnails/9.jpg)
XP
9
searches for default file
www.palomar.edu
![Page 10: CSWB 110 Tutorial1 Part A](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54d312bb4a7959fc708b45b5/html5/thumbnails/10.jpg)
XP
10
Which page to load as Home Page??
• index.html• index.htm
• home.html
• home.htm
• default.htm
• default.asp, default.aspx, index.asp, index.aspx
![Page 11: CSWB 110 Tutorial1 Part A](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54d312bb4a7959fc708b45b5/html5/thumbnails/11.jpg)
XP
11
HTML: Language of the Web Page
A Web page is a text file written in a language called Hypertext Markup Language - describes a document’s structure and content.
HTML is not a programming language or a formatting language.
XHTML – the latest official version of HTML
HTML5 – the next version of HTML
![Page 12: CSWB 110 Tutorial1 Part A](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54d312bb4a7959fc708b45b5/html5/thumbnails/12.jpg)
XP
12
Goal of XHTML
Portability
Accessibility
Standardization
![Page 13: CSWB 110 Tutorial1 Part A](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54d312bb4a7959fc708b45b5/html5/thumbnails/13.jpg)
XP
13
How was this accomplished
Separation of content from presentation by
using Cascading Style Sheets (CSS)
CSS replaces many HTML attributes
![Page 14: CSWB 110 Tutorial1 Part A](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54d312bb4a7959fc708b45b5/html5/thumbnails/14.jpg)
XP
14
Tools for Creating HTML Documents
HTML Editor – Coffeecup
Text editor – notepad
Visual creator – Dreamweaver, SharePoint Designer
Converter – MS Word
![Page 15: CSWB 110 Tutorial1 Part A](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54d312bb4a7959fc708b45b5/html5/thumbnails/15.jpg)
XP
15
The HTML Language
Elements ( or tags)
Attributes
Values (of the attributes)
![Page 16: CSWB 110 Tutorial1 Part A](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54d312bb4a7959fc708b45b5/html5/thumbnails/16.jpg)
XP
16
Characterisitcs of HTML5
Open platform
Adapts to any device
Native support for more powerful
applications
![Page 17: CSWB 110 Tutorial1 Part A](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54d312bb4a7959fc708b45b5/html5/thumbnails/17.jpg)
XP
17
The HTML language consists of
“tags” or “elements”
Tags can be two-sided:
<body> </body> Enclose something – either content or more tags
Tags can be one-sided:
<br> or <br /> No content, they are considered “empty” tags
XHTML syntax
![Page 18: CSWB 110 Tutorial1 Part A](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54d312bb4a7959fc708b45b5/html5/thumbnails/18.jpg)
XP
18
HTML Tags and Attributes
![Page 19: CSWB 110 Tutorial1 Part A](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54d312bb4a7959fc708b45b5/html5/thumbnails/19.jpg)
XP
19
The HTML Document
Consists of two parts:
Head sectionWhere information for the browser goes
Body sectionWhere the content for the web pages goes
![Page 20: CSWB 110 Tutorial1 Part A](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54d312bb4a7959fc708b45b5/html5/thumbnails/20.jpg)
XP
Basic HTML Tags or Elements
<html> <head> <title> </title> </head>
<body>
</body></html>
![Page 21: CSWB 110 Tutorial1 Part A](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54d312bb4a7959fc708b45b5/html5/thumbnails/21.jpg)
XP
21
Paragraph Tag – centering – Block Level Element
<p style=“text-align: center”> </p>
values are left, right, center, justify
Attribute CSS property CSS value
![Page 22: CSWB 110 Tutorial1 Part A](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54d312bb4a7959fc708b45b5/html5/thumbnails/22.jpg)
XP
22
Break Tag
• Line break• One sided tag• Self-terminating
<br> <br />
![Page 23: CSWB 110 Tutorial1 Part A](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54d312bb4a7959fc708b45b5/html5/thumbnails/23.jpg)
XP
23
Bold / Italic – Inline Elements
<b>this is bold</b>
<i>this is italic</i>
Comments: <!-- -->
![Page 24: CSWB 110 Tutorial1 Part A](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54d312bb4a7959fc708b45b5/html5/thumbnails/24.jpg)
XP
24
Heading tags - bold, block-level element
<h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6>
<h1 style=“text-align: center”> </h1>
values are left, right, center, justify
![Page 25: CSWB 110 Tutorial1 Part A](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54d312bb4a7959fc708b45b5/html5/thumbnails/25.jpg)
XP
25
Deprecated - “align” attribute
<h1 align=“center”> </h1>
Replaced with CSS:
<h1 style=“text-align: center”> </h1>
deprecated
![Page 26: CSWB 110 Tutorial1 Part A](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54d312bb4a7959fc708b45b5/html5/thumbnails/26.jpg)
XP
26
Now start learning to write HTML
by using the elements
we have just covered!