Download presentation
Presentation is loading. Please wait.
1
Intro to Web Development First Web Page
2
First Web Page Using 1st (of 3) Internet Languages
3
Secret Technique:
4
Modify Existing Web Page
Secret Technique: Modify Existing Web Page
5
Two Ways to View Web Page
As Web Page: In Browser
6
Two Ways to View Web Page
As Web Page: In Browser As Text File: In Editor
7
Text Editor
8
Text Editors Notepad Gedit TextPad Notes QuickEdit
Text Editors are apps (programs) for creating simple, human readable files. QuickEdit
9
Programming Text Editors
Atom Sublime Text Emacs
10
ProgramText
11
Desktop Setup: PowerPoint (full screen)
12
Desktop Setup: Atom & Chrome (split screen)
13
Steps Browser View Web Page
14
Steps View Source Code Browser View Web Page
15
Steps Browser Editor View Source Code View Web Page Copy Code
Paste Code
16
Steps Browser Editor View Source Code View Web Page Copy Code
Paste Code Edit Code
17
Steps Browser Editor View Source Code View Web Page Copy Code
Paste Code Edit Code Save
18
Step 1: Visit ScottsDevelopers.com | HTML
19
Step 2: Get HTML5 Simple Template
20
Step 2: Get HTML5 Simple Template
21
Step 3: View Source Code In Chrome, ctrl-u
22
Step 4: Copy Source Code In Chrome, ctrl-a, ctrl-c
23
Step 5: Startup Atom (Close any open panels)
24
Step 6: Create New File File > New
25
Step 7: Paste Text into Atom
ctrl-v
26
Step 8: Save to Desktop File > Save As With webpage name scott.html
27
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>
28
Step 9: Modify HTML
29
Step 10: Save and Test ctrl-s In Chrome:
30
Adding CSS
31
Step 11: Add CSS CSS styling the <body> element:
<title>First Web Page</title> <style> body { color:yellow; background-color:blue; } </style> </head>
32
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>
33
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>
34
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>
35
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>
36
Esc in PowerPoint (End Slide Show)
Step 11b: Add CSS Esc in PowerPoint (End Slide Show) Click in yellow text box
37
Step 11c: Add CSS copy code: Ctrl-A, Ctrl-C
38
Step 12: Add CSS to code in Atom
Paste into Atom Ctrl-V (after <title> line) Correct Indentation Save: Ctrl-S
39
Step 13: In Chrome, Refesh (F5)
40
Step 14: Restart PowerPoint Slide Show (Shift - F5)
41
Adding JavaScript
42
Step 14: Add JavaScript Add “onClick” attribute to <body> calling the JavaScript function "alert()": <body onClick="javascript:alert('hi');">
43
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
44
Step 14b: Add JavaScript Paste into Atom After original <body>
45
Delete original <body> tag
Step 14c: Add JavaScript Delete original <body> tag Save ctrl-S
46
Step 14d: Add JavaScript Refresh Chrome: F5 Click Text
47
Summary Three languages
48
Summary Three languages HTML
49
Summary Three languages CSS
50
Summary Three languages JavaScript
Similar presentations
