Getting Started with your Website
-
Upload
nicole-ryan -
Category
Education
-
view
422 -
download
2
Transcript of Getting Started with your Website
![Page 1: Getting Started with your Website](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cca41a28abeb738b6051/html5/thumbnails/1.jpg)
Getting Started with HTML
![Page 2: Getting Started with your Website](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cca41a28abeb738b6051/html5/thumbnails/2.jpg)
Objectives
Define a project plan
Create wireframes and a storyboard
Create an HTML document
Set up the document head and body
Add text to a web page
HTML 5 and CSS 3 - Illustrated Complete 2
![Page 3: Getting Started with your Website](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cca41a28abeb738b6051/html5/thumbnails/3.jpg)
Objectives (continued)
Add a comment to a web document
Preview your web page on a desktop computer
Configure web server software
Preview your web page on mobile devices
HTML 5 and CSS 3 - Illustrated Complete 3
![Page 4: Getting Started with your Website](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cca41a28abeb738b6051/html5/thumbnails/4.jpg)
Define a Project Plan
Project plan: document that identifies aspects of the project Also known as a design document
Ask questions to find out customer’s expectations and goals, including
• Goals and objectives of the website• Target audience• Type of website• Budget for website• Timeline for website
HTML 5 and CSS 3 - Illustrated Complete 4
![Page 5: Getting Started with your Website](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cca41a28abeb738b6051/html5/thumbnails/5.jpg)
Define a Project Plan(continued)
Sample project plan
HTML 5 and CSS 3 - Illustrated Complete 5
![Page 6: Getting Started with your Website](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cca41a28abeb738b6051/html5/thumbnails/6.jpg)
Create Wireframes and a Storyboard
Wireframe: sketch that outlines web page components and their place in the layout
Storyboard: shows links between web pages
To create a wireframe and storyboard• Identify components (use project plan)• Sketch possible layouts• Map relationships among pages
HTML 5 and CSS 3 - Illustrated Complete 6
![Page 7: Getting Started with your Website](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cca41a28abeb738b6051/html5/thumbnails/7.jpg)
Create Wireframes and a Storyboard (continued)
Sketch for a main web page
HTML 5 and CSS 3 - Illustrated Complete 7
![Page 8: Getting Started with your Website](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cca41a28abeb738b6051/html5/thumbnails/8.jpg)
Create Wireframes and a Storyboard (continued)
Storyboard showing links for website
HTML 5 and CSS 3 - Illustrated Complete 8
![Page 9: Getting Started with your Website](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cca41a28abeb738b6051/html5/thumbnails/9.jpg)
Create an HTML Document
HTML (Hypertext Markup Language): standardized format for web pages
HTML document consists of text Text to be displayed on the web page Tags specifying how the browser should
render each item
Most tags occur in pairs, but one-sided tags are used by themselves
HTML 5 and CSS 3 - Illustrated Complete 9
![Page 10: Getting Started with your Website](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cca41a28abeb738b6051/html5/thumbnails/10.jpg)
Create an HTML Document (continued)
Start document with <!DOCTYPE html> declaration
Add <html> and </html> tags to define beginning and end of web page
Create document by hand-coding in a text editor or by using suitable program
HTML 5 and CSS 3 - Illustrated Complete 10
![Page 11: Getting Started with your Website](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cca41a28abeb738b6051/html5/thumbnails/11.jpg)
Create an HTML Document (continued)
Basic structure of a web page in a text editor
HTML 5 and CSS 3 - Illustrated Complete 11
![Page 12: Getting Started with your Website](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cca41a28abeb738b6051/html5/thumbnails/12.jpg)
Set Up the Document Head and Body
HTML document divided into head and body sections Head section: contains elements that are
not part of the main web page Body section: contains elements that are
visible in the main window of a web browser
Head and body tags are nested within html tags
HTML 5 and CSS 3 - Illustrated Complete 12
![Page 13: Getting Started with your Website](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cca41a28abeb738b6051/html5/thumbnails/13.jpg)
Set Up the Document Head and Body (continued)For clarity of structure, nested elements are On new lines Indented by two spaces relative to parent
element
To add head section Add <head> and </head> tags in new
lines within the html tags
HTML 5 and CSS 3 - Illustrated Complete 13
![Page 14: Getting Started with your Website](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cca41a28abeb738b6051/html5/thumbnails/14.jpg)
Set Up the Document Head and Body (continued)To add body portion, add <body> and </body> tags in new lines within the html tags
Completed web page structure
HTML 5 and CSS 3 - Illustrated Complete 14
![Page 15: Getting Started with your Website](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cca41a28abeb738b6051/html5/thumbnails/15.jpg)
Add Text to a Web Page
Type the text for the web page
Add HTML tags to specify the element type for each text item, for example<title> and </title>: text that
appears in the web browser’s title bar<h1> and </h1>: highest level heading<p> and </p>: paragraph of text
HTML 5 and CSS 3 - Illustrated Complete 15
![Page 16: Getting Started with your Website](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cca41a28abeb738b6051/html5/thumbnails/16.jpg)
Add Text to a Web Page(continued)
Title, h1, and p elements entered
HTML 5 and CSS 3 - Illustrated Complete 16
![Page 17: Getting Started with your Website](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cca41a28abeb738b6051/html5/thumbnails/17.jpg)
Add a Comment to aWeb Page
HTML comments add information not shown in the web browser
Use to explain what code does or to point out beginning and end of parts of the code
Comments Defined by <!-- … --> Can be single line Can be multi-line
HTML 5 and CSS 3 - Illustrated Complete 17
![Page 18: Getting Started with your Website](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cca41a28abeb738b6051/html5/thumbnails/18.jpg)
Add a Comment to aWeb Page (continued)
Comment text added to an HTML document
HTML 5 and CSS 3 - Illustrated Complete 18
![Page 19: Getting Started with your Website](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cca41a28abeb738b6051/html5/thumbnails/19.jpg)
Preview Your Web Page on a Desktop Computer
To preview a web page open it in one or more user agents Allows page writer to research problems
and correct them before publishing the page
Use file manager to open web page in one or more browsers
Note differences in the way the page is displayed in different browsers
HTML 5 and CSS 3 - Illustrated Complete 19
![Page 20: Getting Started with your Website](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cca41a28abeb738b6051/html5/thumbnails/20.jpg)
Preview Your Web Page on a Desktop Computer (continued)Preview of web page in Google Chrome
HTML 5 and CSS 3 - Illustrated Complete 20
![Page 21: Getting Started with your Website](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cca41a28abeb738b6051/html5/thumbnails/21.jpg)
Configure Web ServerSoftware
Web server: computer running web server software and connected to the Internet
Use a web server to open a file on desktop computer on another device, like a mobile phone
Aptana Studio 3, free code editor with built-in web server
HTML 5 and CSS 3 - Illustrated Complete 21
![Page 22: Getting Started with your Website](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cca41a28abeb738b6051/html5/thumbnails/22.jpg)
Configure Web ServerSoftware (continued)
Accessing Aptana web server
HTML 5 and CSS 3 - Illustrated Complete 22
![Page 23: Getting Started with your Website](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cca41a28abeb738b6051/html5/thumbnails/23.jpg)
Preview Your Web Page onMobile Devices
Important to test web page on variety of devices, including desktops, tablets, and mobile phones
Web pages are rendered differently on different devices
Testing helps you see what changes, if any, need to be made
Must be connected to a web server to test on a mobile phone
HTML 5 and CSS 3 - Illustrated Complete 23
![Page 24: Getting Started with your Website](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cca41a28abeb738b6051/html5/thumbnails/24.jpg)
Preview Your Web Page onMobile Devices
Web page phone and tablet
HTML 5 and CSS 3 - Illustrated Complete 24
![Page 25: Getting Started with your Website](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cca41a28abeb738b6051/html5/thumbnails/25.jpg)
Summary
Prior planning is a crucial component in designing a good website
When planning a website, the designer must consider the goals and objectives of the site, the target audience, the type of site, the budget, and the timeline
Use a wireframe to outline the components of a website
HTML 5 and CSS 3 - Illustrated Complete 25
![Page 26: Getting Started with your Website](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cca41a28abeb738b6051/html5/thumbnails/26.jpg)
Summary (continued)
Use a storyboard to show links between the pages
HTML is a coding language
An HTML document is a text document that defines a structure of the text to be displayed
The structure of the text to be displayed is defined by the use of tags
HTML 5 and CSS 3 - Illustrated Complete 26
![Page 27: Getting Started with your Website](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cca41a28abeb738b6051/html5/thumbnails/27.jpg)
Summary (continued)
An HTML document includeshtml opening and closing tagshead opening and closing tagsbody opening and closing tags Other tags nested within
HTML elements includetitle tags for titlesh tags for headings (h1 – h6)p tags for paragraphs
HTML 5 and CSS 3 - Illustrated Complete 27
![Page 28: Getting Started with your Website](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cca41a28abeb738b6051/html5/thumbnails/28.jpg)
Summary (continued)
Comments provide additional information; not viewed in the browser
Preview web page on different devices using different browsers; look for unexpected results
Use a web server to view web page on mobile phones
HTML 5 and CSS 3 - Illustrated Complete 28