26
Internet & World Wide Web: How to Program by Internet & World Wide Web: How to Program by Deitel and Deitel XHTML Hands-On L 01 Lesson 01
Internet & World Wide Web: How to Program byInternet & World Wide Web: How to Program by Deitel and Deitel
XHTMLHands-OnL 01Lesson 01
Use a Text EditorUse a Text Editor
The file you create must be plain textThe file you create must be plain text– Not a Word document
Not Rich Text Format ( rtf)– Not Rich Text Format (.rtf)– Just text
We will give it an extension of htm– We will give it an extension of .htm• Other extensions work, too, such as .html
N t d b b Notepad – bare bones Visual Studio’s text editor – much better Many other tools – some are WYSIWYG
G tti St t d ithGetting Started with Visual Studio
Open Visual StudioFile – New Web SiteChoose ASP.NET Empty Web Site template by highlighting it in
the template list
G tti St t d ithGetting Started with Visual Studio
Rename the project folder MyWebSiteRedirect files to your personal usbmemory device or to your Home drive. (**We will use this one project all semester to add pagesproject all semester to add pages during hands-on exercises)Then select OK button
Add a Blank HTML P t th E t W bPage to the Empty Web Site Project
Right click on the project name in Solution ExplorerSelect Add New ItemScroll in the list of items to select HTML Page as the templateRename it to whatever you wishThen click Add
St t i C t tStructuring Content with XHTML
The Visual Studio text editor uses color to help you distinguish parts of your mark-up. Very helpful!
Change the content shown here ( t t i di l d i bl k it i(content is displayed in black, it is Untitled Page) to: XHTML Hands-On Lesson 1.
St t i C t tStructuring Content with XHTML
The first line of markup is XML markup. It specifies the document type which, in this case, is XHTML. It also says that the document will conform to the XHTML 1.0 Transitional document type definitionTransitional document type definition (DTD) which is found at the provided url.The document’s content is, structurally, an html document.This is indicated by the markup. The <html></html> element states this.A computer program called a parser extracts this information and tells the
lli li ti th t th d tcalling application that the document is an html document.The calling application then processes the document in ways consistent with the document typeconsistent with the document type.
St t i C t tStructuring Content with XHTML
The structure of the html document includes a header and body. These structural elements of the document are marked up, respectively, with <head></head> and <body></body> elements<body></body> elements.
Add some content (shown in black) between the start and end tags of the <body></body> element.y y
The page should be saved inside of a folder named MyWebSite. The file is named whatever you named it.
St t i C t tStructuring Content with XHTML
You can see the page in Design view by clicking on the Design option at the bottom of the window container.
Structuring Content with XHTMLg
Let’s add more structural elements Go back to Source viewGo back to Source view
Structuring ContentStructuring Content with XHTML
Add structural elements of h b i th /paragraphs by using the <p></p>
element. Surround the content with a <p> start tag and a </p> end tag.
St t i C t tStructuring Content with XHTML
You can include content that receives emphasis by using the <em></em> element. Enclose the content to receive emphasis inside of a pair of <em></em> tags.
St t i C t tStructuring Content with XHTML
To use a structural element of a numbered list, use the <ol></ol> element. The element name, ol, stands for “outline list” or “ordered list”.
Another kind of list is a bulleted list. Create a bulleted list by using the <ul></ul> element. The element name, ul, stands for “unnumbered , ,list” or “unordered list”.
A list contains items. Each structural item is so denoted using the <li></li> element.
<li></li> tag pairs must be nested inside of <ol></ol> or <ul></ul> ttags.
Structuring Content with XHTMLg
Go to Design View again
Vi th P i YView the Page in Your Browser
Right click on the page file name (whatever you named it.htm) in Solution ExplorerSelect View in BrowserVisual Studio IDE provides a web
t b l ll tserver to serve web pages locally to your browserThat web server is named localhost – which you can see in the urlthe url
St t i C t tStructuring Content with XHTML
A structural element of a table can be added to the document to display tabular data.
The <table></table> element creates a t bl t ttable structure.
The <caption></caption> element creates a structure for a caption for the tabletable.
The <tbody></tbody> element creates structure for the body of the table.
The <tr></tr> element defines a table row.The <td></td> element defines a table datum Each <td></td> is displayed as adatum. Each <td></td> is displayed as a column.
St t i C t tStructuring Content with XHTML
Add table content inside the corresponding elements.
Note additional table structures that can be added. The <th></th>
l t i d t t telement is used to structure a column heading row in the heading part of a table. The heading part of the table is structured as such using the<thead></thead> element.g
Similar to the <caption></caption> element is the <tfoot></tfoot> element used to structure a footer.
View Your Work
Use Visual Studio’s Design viewOr use View in Browser to open the page in your browser (shown here)
How Do You Make Your Page Accessible via the WWW?
Upload the file to a web server that is partUpload the file to a web server that is part of the WWW We will do this later We will do this later Do not discard this project Upload your XHTML page to the dropbox
in Blackboard to receive credit for today’s in-class points
I t t! WhImportant! Where are the Project Files?
Go to My Documents for the current userGo to Visual Studio 2010 folderGo to Projects folderThere should be a subfolder named MyWebSite, unless you named this first hands-on project something else
I t t! WhImportant! Where are the Project Files?
Open the MyWebSitefolder under ProjectsUh-oh, no .htm files in there.sln extension means thi i th j tthis is the project Solution fileIt contains information about what type of project and where theproject and where the project files are locatedIt is a text file that you can open in any text editor – but be careful –don’t change it unless you understand the information that’s in it
I t t! WhImportant! Where are the Project Files?
Go to My DocumentsGo to Visual Studio 2010Go to WebSitesYes! There is a web site folder named MyWebSite!
I t t! WhImportant! Where are the Project Files?
Open the MyWebSite folder under WebSitesHooray! There is the file you created in class!
L t’ T lk Ab tLet’s Talk About Profiles
Your profile contains all the data you save in My Documents and then some …
L t’ T lk Ab tLet’s Talk About Profiles
The contents of your profile are downloaded when you log on to the Cougarnet domain on campuson campusThe entire contents of your profile are uploaded when you log off from the Cougarnetdomain on campus
Internet & World Wide Web: How to Program byInternet & World Wide Web: How to Program by Deitel and Deitel
XHTMLHands-OnL 01Lesson 01
![XHTML™ 1.0 The Extensible HyperText Markup …index-of.co.uk/Programming/XHTML 1.0 The Extensible...HTML 4 [HTML4 [p.31] ] is an SGML (Standard Generalized Markup Language) application](https://static.documents.pub/doc/80x56/5ee0293aad6a402d666b661c/xhtmla-10-the-extensible-hypertext-markup-index-ofcoukprogrammingxhtml-10.jpg)
![Towards the generation of mobile device markup from web pages · languages, creating two standards: XHTML Mobile Profile (XHTML-MP) and Wireless Markup Language (WML) 2 [5]. XHTML-MP](https://static.documents.pub/doc/80x56/5f653baa47f87954d67ff965/towards-the-generation-of-mobile-device-markup-from-web-pages-languages-creating.jpg)
