Lesson 4 - HTML Files & Pages
LEARN
Today's Agenda
- Building a webpage
- Create first page on Github Pages Server
- Test Tools
- Project 2
Daily Reading
- Read 1.4 Web trends
- Follow Reading Schedule
Computer Tools
- You need a computer to complete this class
- Use UNC computers
- Buy a cheap laptop - Chromebook $400
Development Tools
- Free and easy to install
- Visual Studio Code - Integrated HTML editor
- Git - version control system
- Firefox - protect your privacy
Visual Studio Code
- Visual Studio Code - Free download
- Programmers editor
- Knows HTML & CSS
- Integrated support for Git
Git Tools
- Git tools Free download
- Command line scripts
- Integrates with Visual Studio
Firefox
- Firefox Browser
- Privacy concerns
- Allows me to help you
Web Servers and Web Browsers
Web servers responds with the requested web pages
HTML
- Defines the structure of the web page
- Use elements (eg. h1, p)
Example Page
<h1>My Name is Inigo Montoya</h1>
<p>You killed my father.</p>
<p>Prepare to die.</p>
Github Pages
- In Project 1 you created a web server
- Now we will build pages on your server
BUILD
Create a file
- Go to your Github Pages repo
- Choose Create New File
- Filename "bacs200/index.html"
- Must be all lower case
Example Page
<h1>My Name is Inigo Montoya</h1>
<p>You killed my father.</p>
<p>Prepare to die.</p>
Visit your page
- Visit your web main page
- https://YOUR_NAME.github.io
- Visit your web new page
- https://YOUR_NAME.github.io/bacs200/index.html
Create a file
- Go to your Github Pages repo
- Choose Create New File
- Filename "bacs200/profile.html"
- Must be all lower case
Profile Page
- Add the example HTML
<h1>PROFILE PAGE</h1>
<p>My name is Mark</p>
Visit your page
- Visit your web main page
- https://YOUR_NAME.github.io
- Visit your web new pages
- https://YOUR_NAME.github.io/bacs200/profile.html
- https://YOUR_NAME.github.io/bacs200/index.html