Download presentation
Presentation is loading. Please wait.
1
Intro to Web Development Links
2
Desktop Setup: Atom & Chrome (split screen)
3
Step 1: Visit ScottsDevelopers.com | HTML
4
Step 2: Get HTML5 Simple Template
5
Step 2: Get HTML5 Simple Template
6
Step 3: View Source Code In Chrome, ctrl-u ( )
7
Step 4: Copy Source Code In Chrome, ctrl-a, ctrl-c ( , )
8
Step 5: Startup Atom (Close any open panels)
9
Step 6: Create New File File > New
10
Step 7: Paste Text into Atom
ctrl-v ( )
11
Step 8: Save to Desktop File > Save As With webpage name home.html
12
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>
13
Step 9: Modify HTML
14
Step 10: Save and Test ctrl-s ( ) In Chrome:
15
Don't Close the File in Atom!
16
Step 11: Modify HTML
17
Step 10: Save As tuition.html (different file!)
In Chrome:
18
Goal: "Link" between two Web Pages:
19
Clicking on something on a web page takes you to a different page!
Hyperlinking: Clicking on something on a web page takes you to a different page!
20
Clicking on something on a web page takes you to a different page!
Hyperlinking: Clicking on something on a web page takes you to a different page! Click Here
21
Hyperlinking: Click Here
22
Hyperlinking: Click Here
23
Hyperlinking: Hyperlink
24
Code
25
Two New HTML Elements
26
<a> is the "hyperlink" tag
Two New HTML Elements <a> is the "hyperlink" tag
27
<a> is the "hyperlink" tag (used to be the "anchor" tag)
Two New HTML Elements <a> is the "hyperlink" tag (used to be the "anchor" tag)
28
<a> Element <href> is the "hyperlink reference" attribute of the <a> tag
29
Add hyperlinks to both pages
home.html tuition.html
30
Test
31
Hyperlinks
32
Hyperlinks
34
HyperText (links)
35
HyperText (links) Markup (tags)
36
HyperText (links) Markup (tags) Language
Similar presentations
