A109 base code html
Download as PPTX, PDF0 likes244 views
The document provides an introduction to HTML and the DOM (Document Object Model) for students new to coding. It explains that a basic understanding of HTML is needed to work with JavaScript. It discusses HTML tags and their functions. It also presents visual representations of the DOM and how it organizes the elements of an HTML document in a tree structure. It instructs students to practice writing simple HTML code, save it as an .html file, and view it in a web browser.
A109 base code html
- 1. JavaScript Need to know HTML5
- 2. If you already know a bit of HTML? I know there will be a few of you in this course who have had some HTML background and this section will seem overly simplified. The issue here is that the vast majority of students enrolled in this course have very little to no experience with coding and programming. Please bear with us while we work through this second week.
- 3. Translating a Foreign Language Take a look at the document to the right. Before I give you any explanation as to what it all means, I want you to examine the various words and symbols and to see if you can find any repeating patterns any logic to it. Can you guess what it is intended to do?
- 4. Translating a Foreign Language Did you notice the following symbols and words? <> </ > <! - - - - > DOCTYPE html head title body h1 p Can you find any repeating patterns? Can you guess the function of any of the words? Making the effort here will pay off with learning later.
- 5. Translating a Foreign Language The language used here is HTML5. It will be necessary for you to have, at least, a basic understanding of HTML5 if you are going to be working with JavaScript. The two languages interact quite extensively. On first review we will divide HTML5 expressions into two types : 1. Tags 2. Text What you need to know about tags at the moment is that they are activated by the appearance of this symbol set < > and they are deactivated by these </ > In other words, when the words html or head or title are situated inside these symbols they go from being ordinary text to being tags. And tags make things happen – like publishing a webpage title: HTML5 Reference <title>HTML5 Reference</title>
- 6. Find details about the function and use of the following HTML Tags <html> </html> <head> </head> <title> </title> <h1> </h1> <p> </p> Go to the following website: http://www.w3schools.com/tags/tag_html.asp Study the Example and then read the Definition and Usage section. Place them into your toolbox. In the left hand column you will find more HTML tags including all the ones listed above. Place them into your toolbox as well. Bookmark the website. It is an excellent resource and we will be using it in a variety of ways.
- 7. Put the DOM concept into your Toolbox. This is a very important concept which we will be discussing in more detail later.
- 8. Document Object Model Here is one way to visualize a DOM
- 9. Here is another way to visualize a DOM Examine this model. Now go back to the Translating a Foreign Language slide. Compare the two. Now to the first way to visualize a DOM. See what they have in common. Try to understand the organization and why all three represent parts of the same coding entity.
- 10. What is the HTML DOM? The HTML DOM is: 1. A standard object model for HTML 2. A standard programming interface for HTML 3. Language Neutral (and that includes JavaScript) The HTML DOM defines the objects and properties of all HTML elements, and the methods to access them. In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
- 11. What is the HTML DOM2? Something else that HTML DOM is: 1. A way to begin to understand the process of organizing data so that it can be made useful 2. A way to begin to understand the process of programming Add what you have learned about DOM to your Toolbox. On Sunday I will be asking you to email me your most up-to-date Toolbox (so better to do the work sooner rather than later )
- 12. There are two shortcuts to learning to program 1. Start with ordinary language to describe up you want to do before you translate it into code 2. Use models to help you visualize what your program will ultimately do (and look like).
- 13. Examine the HTML5 code on the right. Now look at it on the left. What changed? Was the change useful? Why? <!DOCTYPE html> <!DOCTYPE html> <html> <html> <head> <head> <title>HTML Reference</title> <title>HTML Reference</title> </head> </head> <body> <h1>Definition</h1> <body> <p>HTML is an acronym <h1>Definition</h1> meaning HyperText Markup <p>HTML is an acronym Language</p> meaning HyperText Markup </body> Language</p> </html> </body> </html>
- 14. Last week I introduced Text Editors and told you to download Notepad++, TextWrangler or a similar editor. Open up your text editor now type in the following HTML5 Code: <!DOCTYPE html> <html> <head> <title>HTML Reference</title> </head> <body> <h1>Definition</h1> <p>HTML is an acronym meaning HyperText Markup Language</p> </body> </html> (Don’t worry about formatting, the text editor will do the formatting for you. Just type!)
- 15. Now Save Your Work These directions pertain precisely to Notepad++ but should match very similar steps in TextWrangler and other editors 1. Go to File 2. Select Save As… 3. Type in a File Name (use your first initial, last name and the no. 1) 4. Click on the drop down arrow on the right side of Save as Type: 5. Select Hyper Text Markup Language (html, etc.) 6. Save in a directory for easy retrieval
- 16. This is what it will look like …at least in Notepad++ Notice the way it organized and visualizes the code Go back and open and close the +/- boxes
- 17. Last Step – The Fun Part 1. Go back to your Text Editor 2. Choose the Run function from your Menu Bar 3. You will have several choices for Launch in a Web Browser 4. Choose the one you use and click on it 5. A window will open in that browser and your program will appear. 6. It is a very simple program. It shows the header Definition and then gives a brief explanation of that definition. 7. So now go back to your text editor and make some changes. Play around with it. See what happens when you run the changes. 8. Once you’re satisfied with your work send me a copy of the file.