Intro to Web Development First Web Page
First Web Page Using 1st (of 3) Internet Languages
Secret Technique:
Modify Existing Web Page Secret Technique: Modify Existing Web Page
Two Ways to View Web Page As Web Page: In Browser
Two Ways to View Web Page As Web Page: In Browser As Text File: In Editor
Text Editor
Text Editors Notepad Gedit TextPad Notes QuickEdit Text Editors are apps (programs) for creating simple, human readable files. QuickEdit
Programming Text Editors Atom Sublime Text Emacs
ProgramText
Desktop Setup: PowerPoint (full screen)
Desktop Setup: Atom & Chrome (split screen)
Steps Browser View Web Page
Steps View Source Code Browser View Web Page
Steps Browser Editor View Source Code View Web Page Copy Code Paste Code
Steps Browser Editor View Source Code View Web Page Copy Code Paste Code Edit Code
Steps Browser Editor View Source Code View Web Page Copy Code Paste Code Edit Code Save
Step 1: Visit ScottsDevelopers.com | HTML
Step 2: Get HTML5 Simple Template
Step 2: Get HTML5 Simple Template
Step 3: View Source Code In Chrome, ctrl-u
Step 4: Copy Source Code In Chrome, ctrl-a, ctrl-c
Step 5: Startup Atom (Close any open panels)
Step 6: Create New File File > New
Step 7: Paste Text into Atom ctrl-v
Step 8: Save to Desktop File > Save As With webpage name scott.html
Step 9: Modify HTML Change web page title and page content: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> Your Title Here </title> </head> <body> Your message here! </body> </html>
Step 9: Modify HTML
Step 10: Save and Test ctrl-s In Chrome:
Adding CSS
Step 11: Add CSS CSS styling the <body> element: <title>First Web Page</title> <style> body { color:yellow; background-color:blue; } </style> </head>
Step 11: Add CSS CSS styling the <body> element: <title>First Web Page</title> <style> body { color:yellow; background-color:blue; } </style> <style> Block Adds CSS (Cascading Style Sheets) to web page </head>
Step 11: Add CSS CSS styling the <body> element: <title>First Web Page</title> <style> body { color:yellow; background-color:blue; } </style> This styling applies to entire web page (the <body>) </head>
Step 11: Add CSS CSS styling the <body> element: <title>First Web Page</title> <style> body { color:yellow; background-color:blue; } </style> Web page text color is yellow </head>
Step 11: Add CSS CSS styling the <body> element: <title>First Web Page</title> <style> body { color:yellow; background-color:blue; } </style> Web page background is blue </head>
Esc in PowerPoint (End Slide Show) Step 11b: Add CSS Esc in PowerPoint (End Slide Show) Click in yellow text box
Step 11c: Add CSS copy code: Ctrl-A, Ctrl-C
Step 12: Add CSS to code in Atom Paste into Atom Ctrl-V (after <title> line) Correct Indentation Save: Ctrl-S
Step 13: In Chrome, Refesh (F5)
Step 14: Restart PowerPoint Slide Show (Shift - F5)
Adding JavaScript
Step 14: Add JavaScript Add “onClick” attribute to <body> calling the JavaScript function "alert()": <body onClick="javascript:alert('hi');">
Esc in PowerPoint (end slide show) Step 14a: Add JavaScript Esc in PowerPoint (end slide show) Screen scrape text in yellow box from Step 14 Click : ctrl-A, ctrl-C
Step 14b: Add JavaScript Paste into Atom After original <body>
Delete original <body> tag Step 14c: Add JavaScript Delete original <body> tag Save ctrl-S
Step 14d: Add JavaScript Refresh Chrome: F5 Click Text
Summary Three languages
Summary Three languages HTML
Summary Three languages CSS
Summary Three languages JavaScript