SlideShare a Scribd company logo
WORKING WITH WEB
PAGE FILES
HTML5 & CSS Visual Quickstart Guide
Chapter 2
Designing Your Site
• First, take some steps to plan and design
 your site
 • Figure out why you’re creating the site…what
   do you want to convey?
 • Think about your audience, and how you can
   tailor your content to appeal to this audience.
   • Should you add lots of graphics to make it flashy, or is
    it more important that the page downloads quickly?
 • How many pages will you need?
Designing Your Site, Part 2
• What structure should it have? Should your users
  be able to explore it in any direction, or do you
  want them to follow a certain path?
• Sketch your site on paper
• Devise a simple, consistent naming system for
  your pages, images, and other files
• Don’t overdo the planning!
Creating a New Web Page
• Don’t need any special tools to create a web page; can
 use any word processor or text editor
  • On Windows: NotePad or WordPad (Notepad++ is better)
  • On Mac: TextEdit (TextWrangler is better; BBEdit is even better, but
    not free)
  • On Linux: pico, nano, gedit, Kedit
• To create a new Web Page:
   • Open any text editor or word processor
   • Choose File > New to create a new, blank document (if necessary)
   • Create the HTML content
   • Save your file
Saving Your Web Page
• So browsers and web servers recognize Web page files,
  they have the .htm or .html extension
• To save your file:
  • Once you’ve created the file, choose File > Save As
  • Choose Plain Text or Text Document (or however the program
    words it) for the format
  • Give the document a name and the .html extension
  • Choose the folder in which to save it
  • Click Save
About Microsoft Word and Web Pages


•Just Say No
Specifying a Default or “Home” Page
• Web servers have a system for recognizing a default page
  in each folder, based on the name of the file
• If your visitors type a URL without a filename, the default
  file is used
• To specify a default or “home” page:
  • Ask your ISP how such a default page should be named.
  • Most servers use index.html; Microsoft servers sometimes use
    default.html
  • For our purposes, index.html should always be used
Organizing Files
• Create a central folder/directory to hold all the material
  that will be available at your Web site
• You may want a separate subfolder for different parts of
  your site, such as a subfolder for images
• Use simple, one-word names without symbols or
  punctuation for your files and folders
  • Web servers don’t deal with spaces in file names the way you
    might expect
  • Neither do web browsers
    • “Images Folder” is a bad directory name
    • So is “images folder”
    • “images_folder” is okay
    • “images” is even better!
Viewing Your Page in a Browser
• Most of the time, you can just double-click the file and it
  will open in a web browser
• Sometimes, you might have to right-click and choose a
  program to open with
The Inspiration of Others
• To view other designers’ HTML code:
   • Open a Web page with any browser
   • Choose View > Source (in some browsers, View > Page Source)
   • If you want, save the file for further study

More Related Content

What's hot

Forms as Structured Content
Forms as Structured Content Forms as Structured Content
Forms as Structured Content
dotCMS
 
Advanced Wordpress
Advanced WordpressAdvanced Wordpress
Advanced Wordpress
lexinamer
 
Drupal: Collaborative Web Tools for Transportation Libraries
Drupal: Collaborative Web Tools for Transportation LibrariesDrupal: Collaborative Web Tools for Transportation Libraries
Drupal: Collaborative Web Tools for Transportation Libraries
AJ Million
 
Web1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSSWeb1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSS
NYCSS Meetup
 
Open Source CMS Playroom
Open Source CMS PlayroomOpen Source CMS Playroom
Open Source CMS Playroomlibrarywebchic
 
Basic word press development
Basic word press developmentBasic word press development
Basic word press development
David Wolfpaw
 
WCBos13 intermediate workshop
WCBos13 intermediate workshopWCBos13 intermediate workshop
WCBos13 intermediate workshop
Boston WordPress
 
Web Design Norms
Web Design NormsWeb Design Norms
Web Design Norms
Shantanu Suryawanshi
 
How word press themes work 2.19.18
How word press themes work 2.19.18How word press themes work 2.19.18
How word press themes work 2.19.18
HandsOnWP.com
 
WordPress Theme Development
WordPress Theme DevelopmentWordPress Theme Development
WordPress Theme Development
Santosh Kunwar
 
WordPress Themes and Plugins
WordPress Themes and PluginsWordPress Themes and Plugins
WordPress Themes and Plugins
superann
 
Getting Under the Hood - WordPress File & Directory Structure
Getting Under the Hood -  WordPress File & Directory StructureGetting Under the Hood -  WordPress File & Directory Structure
Getting Under the Hood - WordPress File & Directory Structure
gregdavispsu
 
Fundamentals of Web
Fundamentals of WebFundamentals of Web
Fundamentals of Web
Sabir Haque
 
Languages of Internet
Languages of InternetLanguages of Internet
Languages of Internet
Codewizacademy
 
Content-Driven WordPress Development - WordCamp Omaha 2014
Content-Driven WordPress Development - WordCamp Omaha 2014Content-Driven WordPress Development - WordCamp Omaha 2014
Content-Driven WordPress Development - WordCamp Omaha 2014
Stephanie Eckles
 
Wordpress 101 v2
Wordpress 101 v2Wordpress 101 v2
Geek basics
Geek basicsGeek basics
Multi-content Containers in dotCMS 3.0
Multi-content Containers in dotCMS 3.0Multi-content Containers in dotCMS 3.0
Multi-content Containers in dotCMS 3.0
Jason Smith
 
Working with Mediawiki
Working with MediawikiWorking with Mediawiki
Working with Mediawiki
James Howard
 

What's hot (20)

Forms as Structured Content
Forms as Structured Content Forms as Structured Content
Forms as Structured Content
 
Advanced Wordpress
Advanced WordpressAdvanced Wordpress
Advanced Wordpress
 
Drupal: Collaborative Web Tools for Transportation Libraries
Drupal: Collaborative Web Tools for Transportation LibrariesDrupal: Collaborative Web Tools for Transportation Libraries
Drupal: Collaborative Web Tools for Transportation Libraries
 
Web1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSSWeb1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSS
 
Open Source CMS Playroom
Open Source CMS PlayroomOpen Source CMS Playroom
Open Source CMS Playroom
 
Basic word press development
Basic word press developmentBasic word press development
Basic word press development
 
WCBos13 intermediate workshop
WCBos13 intermediate workshopWCBos13 intermediate workshop
WCBos13 intermediate workshop
 
Web Design Norms
Web Design NormsWeb Design Norms
Web Design Norms
 
How word press themes work 2.19.18
How word press themes work 2.19.18How word press themes work 2.19.18
How word press themes work 2.19.18
 
Html5
Html5Html5
Html5
 
WordPress Theme Development
WordPress Theme DevelopmentWordPress Theme Development
WordPress Theme Development
 
WordPress Themes and Plugins
WordPress Themes and PluginsWordPress Themes and Plugins
WordPress Themes and Plugins
 
Getting Under the Hood - WordPress File & Directory Structure
Getting Under the Hood -  WordPress File & Directory StructureGetting Under the Hood -  WordPress File & Directory Structure
Getting Under the Hood - WordPress File & Directory Structure
 
Fundamentals of Web
Fundamentals of WebFundamentals of Web
Fundamentals of Web
 
Languages of Internet
Languages of InternetLanguages of Internet
Languages of Internet
 
Content-Driven WordPress Development - WordCamp Omaha 2014
Content-Driven WordPress Development - WordCamp Omaha 2014Content-Driven WordPress Development - WordCamp Omaha 2014
Content-Driven WordPress Development - WordCamp Omaha 2014
 
Wordpress 101 v2
Wordpress 101 v2Wordpress 101 v2
Wordpress 101 v2
 
Geek basics
Geek basicsGeek basics
Geek basics
 
Multi-content Containers in dotCMS 3.0
Multi-content Containers in dotCMS 3.0Multi-content Containers in dotCMS 3.0
Multi-content Containers in dotCMS 3.0
 
Working with Mediawiki
Working with MediawikiWorking with Mediawiki
Working with Mediawiki
 

Similar to Castro Chapter 2

WordPress Intermediate Workshop
WordPress Intermediate WorkshopWordPress Intermediate Workshop
WordPress Intermediate Workshop
The Toolbox, Inc.
 
Interactive Web Design 5 - Week 2 - Introduction
Interactive Web Design 5 - Week 2 -  IntroductionInteractive Web Design 5 - Week 2 -  Introduction
Interactive Web Design 5 - Week 2 - Introduction
Katherine McCurdy-Lapierre, R.G.D.
 
Introduction to Omeka
Introduction to OmekaIntroduction to Omeka
Introduction to Omeka
Rebecca Goldman
 
Week 1 - Interactive News Editing and Producing
Week 1 - Interactive News Editing and ProducingWeek 1 - Interactive News Editing and Producing
Week 1 - Interactive News Editing and Producing
kurtgessler
 
Building Websites with WordPress UBC Summer 2012
Building Websites with WordPress UBC Summer 2012Building Websites with WordPress UBC Summer 2012
Building Websites with WordPress UBC Summer 2012
Tris Hussey
 
DW Unit 1.pdf
DW Unit 1.pdfDW Unit 1.pdf
DW Unit 1.pdf
SeethaDinesh
 
MCC Web Design Workshop
MCC Web Design WorkshopMCC Web Design Workshop
MCC Web Design Workshop
Faye Tandog
 
Create and manage_a_website_1
Create and manage_a_website_1Create and manage_a_website_1
Create and manage_a_website_1David
 
Dreamweaver cs6
Dreamweaver cs6Dreamweaver cs6
Dreamweaver cs6
Mudasir Syed
 
Project Management with WordPress & P2 - WordCamp Toronto 2013
Project Management with WordPress & P2 - WordCamp Toronto 2013Project Management with WordPress & P2 - WordCamp Toronto 2013
Project Management with WordPress & P2 - WordCamp Toronto 2013
WPUniversity
 
Introduction to web sites design
Introduction to  web sites designIntroduction to  web sites design
Introduction to web sites design
Marwa Abdelgawad
 
WordPress Complete Tutorial
WordPress Complete TutorialWordPress Complete Tutorial
WordPress Complete Tutorial
OpenSource Technologies Pvt. Ltd.
 
My website is live now what?
My website is live now what?My website is live now what?
My website is live now what?
Michele Butcher-Jones
 
How to Use Dreamweaver cs6
How to Use Dreamweaver cs6 How to Use Dreamweaver cs6
How to Use Dreamweaver cs6
Salman Memon
 
WordPress - Open Source Overview Presentation
WordPress - Open Source Overview PresentationWordPress - Open Source Overview Presentation
WordPress - Open Source Overview Presentation
Andy Stratton
 
HTML course.ppt
HTML course.pptHTML course.ppt
HTML course.ppt
RyanTeo35
 
Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG) Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG) Mediacurrent
 
Wd & im session a3 _introduction to web page editors_april 08,2010
Wd & im session a3 _introduction to web page editors_april 08,2010Wd & im session a3 _introduction to web page editors_april 08,2010
Wd & im session a3 _introduction to web page editors_april 08,2010Mahesh Panchal
 
Share point 2013 Building Websites
Share point 2013 Building WebsitesShare point 2013 Building Websites
Share point 2013 Building Websites
Suhas R Satish
 
Basics for hosting a website
Basics for hosting a websiteBasics for hosting a website

Similar to Castro Chapter 2 (20)

WordPress Intermediate Workshop
WordPress Intermediate WorkshopWordPress Intermediate Workshop
WordPress Intermediate Workshop
 
Interactive Web Design 5 - Week 2 - Introduction
Interactive Web Design 5 - Week 2 -  IntroductionInteractive Web Design 5 - Week 2 -  Introduction
Interactive Web Design 5 - Week 2 - Introduction
 
Introduction to Omeka
Introduction to OmekaIntroduction to Omeka
Introduction to Omeka
 
Week 1 - Interactive News Editing and Producing
Week 1 - Interactive News Editing and ProducingWeek 1 - Interactive News Editing and Producing
Week 1 - Interactive News Editing and Producing
 
Building Websites with WordPress UBC Summer 2012
Building Websites with WordPress UBC Summer 2012Building Websites with WordPress UBC Summer 2012
Building Websites with WordPress UBC Summer 2012
 
DW Unit 1.pdf
DW Unit 1.pdfDW Unit 1.pdf
DW Unit 1.pdf
 
MCC Web Design Workshop
MCC Web Design WorkshopMCC Web Design Workshop
MCC Web Design Workshop
 
Create and manage_a_website_1
Create and manage_a_website_1Create and manage_a_website_1
Create and manage_a_website_1
 
Dreamweaver cs6
Dreamweaver cs6Dreamweaver cs6
Dreamweaver cs6
 
Project Management with WordPress & P2 - WordCamp Toronto 2013
Project Management with WordPress & P2 - WordCamp Toronto 2013Project Management with WordPress & P2 - WordCamp Toronto 2013
Project Management with WordPress & P2 - WordCamp Toronto 2013
 
Introduction to web sites design
Introduction to  web sites designIntroduction to  web sites design
Introduction to web sites design
 
WordPress Complete Tutorial
WordPress Complete TutorialWordPress Complete Tutorial
WordPress Complete Tutorial
 
My website is live now what?
My website is live now what?My website is live now what?
My website is live now what?
 
How to Use Dreamweaver cs6
How to Use Dreamweaver cs6 How to Use Dreamweaver cs6
How to Use Dreamweaver cs6
 
WordPress - Open Source Overview Presentation
WordPress - Open Source Overview PresentationWordPress - Open Source Overview Presentation
WordPress - Open Source Overview Presentation
 
HTML course.ppt
HTML course.pptHTML course.ppt
HTML course.ppt
 
Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG) Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG)
 
Wd & im session a3 _introduction to web page editors_april 08,2010
Wd & im session a3 _introduction to web page editors_april 08,2010Wd & im session a3 _introduction to web page editors_april 08,2010
Wd & im session a3 _introduction to web page editors_april 08,2010
 
Share point 2013 Building Websites
Share point 2013 Building WebsitesShare point 2013 Building Websites
Share point 2013 Building Websites
 
Basics for hosting a website
Basics for hosting a websiteBasics for hosting a website
Basics for hosting a website
 

More from Jeff Byrnes

Castro Chapter 15
Castro Chapter 15Castro Chapter 15
Castro Chapter 15Jeff Byrnes
 
Castro Chapter 11
Castro Chapter 11Castro Chapter 11
Castro Chapter 11Jeff Byrnes
 
Castro Chapter 10
Castro Chapter 10Castro Chapter 10
Castro Chapter 10Jeff Byrnes
 
Castro Chapter 9
Castro Chapter 9Castro Chapter 9
Castro Chapter 9Jeff Byrnes
 
Castro Chapter 8
Castro Chapter 8Castro Chapter 8
Castro Chapter 8Jeff Byrnes
 
Castro Chapter 7
Castro Chapter 7Castro Chapter 7
Castro Chapter 7Jeff Byrnes
 
Castro Chapter 6
Castro Chapter 6Castro Chapter 6
Castro Chapter 6Jeff Byrnes
 
Castro Chapter 5
Castro Chapter 5Castro Chapter 5
Castro Chapter 5Jeff Byrnes
 
Castro Chapter 4
Castro Chapter 4Castro Chapter 4
Castro Chapter 4Jeff Byrnes
 
INFO3775 Chapter 2 Part 2
INFO3775 Chapter 2 Part 2INFO3775 Chapter 2 Part 2
INFO3775 Chapter 2 Part 2Jeff Byrnes
 
Castro Chapter 3
Castro Chapter 3Castro Chapter 3
Castro Chapter 3Jeff Byrnes
 
Castro Chapter 2
Castro Chapter 2Castro Chapter 2
Castro Chapter 2Jeff Byrnes
 
INFO 3775 Chapter 2 Part 1
INFO 3775 Chapter 2 Part 1INFO 3775 Chapter 2 Part 1
INFO 3775 Chapter 2 Part 1Jeff Byrnes
 

More from Jeff Byrnes (13)

Castro Chapter 15
Castro Chapter 15Castro Chapter 15
Castro Chapter 15
 
Castro Chapter 11
Castro Chapter 11Castro Chapter 11
Castro Chapter 11
 
Castro Chapter 10
Castro Chapter 10Castro Chapter 10
Castro Chapter 10
 
Castro Chapter 9
Castro Chapter 9Castro Chapter 9
Castro Chapter 9
 
Castro Chapter 8
Castro Chapter 8Castro Chapter 8
Castro Chapter 8
 
Castro Chapter 7
Castro Chapter 7Castro Chapter 7
Castro Chapter 7
 
Castro Chapter 6
Castro Chapter 6Castro Chapter 6
Castro Chapter 6
 
Castro Chapter 5
Castro Chapter 5Castro Chapter 5
Castro Chapter 5
 
Castro Chapter 4
Castro Chapter 4Castro Chapter 4
Castro Chapter 4
 
INFO3775 Chapter 2 Part 2
INFO3775 Chapter 2 Part 2INFO3775 Chapter 2 Part 2
INFO3775 Chapter 2 Part 2
 
Castro Chapter 3
Castro Chapter 3Castro Chapter 3
Castro Chapter 3
 
Castro Chapter 2
Castro Chapter 2Castro Chapter 2
Castro Chapter 2
 
INFO 3775 Chapter 2 Part 1
INFO 3775 Chapter 2 Part 1INFO 3775 Chapter 2 Part 1
INFO 3775 Chapter 2 Part 1
 

Recently uploaded

Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Paige Cruz
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
Ana-Maria Mihalceanu
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
DianaGray10
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
91mobiles
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
Thijs Feryn
 
Assure Contact Center Experiences for Your Customers With ThousandEyes
Assure Contact Center Experiences for Your Customers With ThousandEyesAssure Contact Center Experiences for Your Customers With ThousandEyes
Assure Contact Center Experiences for Your Customers With ThousandEyes
ThousandEyes
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
mikeeftimakis1
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
James Anderson
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
DanBrown980551
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
Sri Ambati
 
Quantum Computing: Current Landscape and the Future Role of APIs
Quantum Computing: Current Landscape and the Future Role of APIsQuantum Computing: Current Landscape and the Future Role of APIs
Quantum Computing: Current Landscape and the Future Role of APIs
Vlad Stirbu
 
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptxSecstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
nkrafacyberclub
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
UiPathCommunity
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
Jemma Hussein Allen
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance
 
A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
sonjaschweigert1
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
Safe Software
 
By Design, not by Accident - Agile Venture Bolzano 2024
By Design, not by Accident - Agile Venture Bolzano 2024By Design, not by Accident - Agile Venture Bolzano 2024
By Design, not by Accident - Agile Venture Bolzano 2024
Pierluigi Pugliese
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
Alison B. Lowndes
 

Recently uploaded (20)

Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
 
Assure Contact Center Experiences for Your Customers With ThousandEyes
Assure Contact Center Experiences for Your Customers With ThousandEyesAssure Contact Center Experiences for Your Customers With ThousandEyes
Assure Contact Center Experiences for Your Customers With ThousandEyes
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
 
Quantum Computing: Current Landscape and the Future Role of APIs
Quantum Computing: Current Landscape and the Future Role of APIsQuantum Computing: Current Landscape and the Future Role of APIs
Quantum Computing: Current Landscape and the Future Role of APIs
 
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptxSecstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
 
A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
 
By Design, not by Accident - Agile Venture Bolzano 2024
By Design, not by Accident - Agile Venture Bolzano 2024By Design, not by Accident - Agile Venture Bolzano 2024
By Design, not by Accident - Agile Venture Bolzano 2024
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
 

Castro Chapter 2

  • 1. WORKING WITH WEB PAGE FILES HTML5 & CSS Visual Quickstart Guide Chapter 2
  • 2. Designing Your Site • First, take some steps to plan and design your site • Figure out why you’re creating the site…what do you want to convey? • Think about your audience, and how you can tailor your content to appeal to this audience. • Should you add lots of graphics to make it flashy, or is it more important that the page downloads quickly? • How many pages will you need?
  • 3. Designing Your Site, Part 2 • What structure should it have? Should your users be able to explore it in any direction, or do you want them to follow a certain path? • Sketch your site on paper • Devise a simple, consistent naming system for your pages, images, and other files • Don’t overdo the planning!
  • 4. Creating a New Web Page • Don’t need any special tools to create a web page; can use any word processor or text editor • On Windows: NotePad or WordPad (Notepad++ is better) • On Mac: TextEdit (TextWrangler is better; BBEdit is even better, but not free) • On Linux: pico, nano, gedit, Kedit • To create a new Web Page: • Open any text editor or word processor • Choose File > New to create a new, blank document (if necessary) • Create the HTML content • Save your file
  • 5. Saving Your Web Page • So browsers and web servers recognize Web page files, they have the .htm or .html extension • To save your file: • Once you’ve created the file, choose File > Save As • Choose Plain Text or Text Document (or however the program words it) for the format • Give the document a name and the .html extension • Choose the folder in which to save it • Click Save
  • 6. About Microsoft Word and Web Pages •Just Say No
  • 7. Specifying a Default or “Home” Page • Web servers have a system for recognizing a default page in each folder, based on the name of the file • If your visitors type a URL without a filename, the default file is used • To specify a default or “home” page: • Ask your ISP how such a default page should be named. • Most servers use index.html; Microsoft servers sometimes use default.html • For our purposes, index.html should always be used
  • 8. Organizing Files • Create a central folder/directory to hold all the material that will be available at your Web site • You may want a separate subfolder for different parts of your site, such as a subfolder for images • Use simple, one-word names without symbols or punctuation for your files and folders • Web servers don’t deal with spaces in file names the way you might expect • Neither do web browsers • “Images Folder” is a bad directory name • So is “images folder” • “images_folder” is okay • “images” is even better!
  • 9. Viewing Your Page in a Browser • Most of the time, you can just double-click the file and it will open in a web browser • Sometimes, you might have to right-click and choose a program to open with
  • 10. The Inspiration of Others • To view other designers’ HTML code: • Open a Web page with any browser • Choose View > Source (in some browsers, View > Page Source) • If you want, save the file for further study