Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Semelhante a WEBD 162: What is a Web Page?
Semelhante a WEBD 162: What is a Web Page? (20)
Último
Último (20)
WEBD 162: What is a Web Page?
- 1. WEBD 162 What is a Web Page?
- 2. What is a web page? (3 views) 1. A plain text file ending in .htm or .html • Has content and codes • May be hyperlinked to connect to other web pages • May be accessible through the World Wide Web • This is the view through a text editor or IDE 2. The actual appearance of the .htm or .html file from a web browser 3. Document Object Model (DOM) view • An abstract overview of the web page • Allows scripts to access and manipulate different parts of web page
- 3. 1. Browser View This was from when I taught WEBD 168
- 4. 2. Code view <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" > <title>First Web Page</title> </head> <body> <h1>Welcome to WEBD 168</h1> <p>Hello, Class!</p> </body> </html>
- 5. Code view: Tags <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" > <title>First Web Page</title> </head> <body> <h1>Welcome to WEBD 168</h1> <p>Hello, Class!</p> </body> </html> Open body tag Close body tag
- 6. Code view: Elements <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" > <title>First Web Page</title> </head> <body> <h1>Welcome to WEBD 168</h1> <p>Hello, Class!</p> </body> </html> This is the body element
- 7. Code view: Content <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" > <title>First Web Page</title> </head> <body> <h1>Welcome to WEBD 168</h1> <p>Hello, Class!</p> </body> </html>
- 8. 3. DOM view (abstract) html head meta title body h1 p Another way to view the DOM is linear, like a string of beads
- 9. HTML DOM Elements • DOM: Document Object Model • Everything is a node • The document itself is a document node • All HTML elements are element nodes • All HTML attributes are attribute nodes • Text inside HTML elements are text nodes • Comments are comment nodes
- 10. HTML DOM Elements • Can programmatically do the following actions with nodes: • Insert • Delete • Access • Modify • Using the DOM, can programmatically make or change web pages • e.g. using Javascript • Working with the DOM is beyond scope of this class • But Developer tools reference the DOM, so overview is useful