Hypertext Markup Language (HTML)
Just like the sandwich analogy in Turbo Pascal, this method is applied in other coding aspects such as the meta-language of HTML. We use HTML to create webpages and combine/host other scripts inside it. Because of its popularity, there are multiple platforms that you can write HTML in. In this class we will experiment with Notepad/TextEdit in the beginning and migrate onto Adobe Dreamweaver to wrap it up.
Characteristics:
An HTML’s sandwich analogy is much simpler to understand than compared to Turbo Pascal’s “begin” and “end” commands. For this new language’s purpose, we will use the terms “activated” and “deactivated” to describe HTML’s commands.
“Sandwich” your design of your webpage within these parameters and save it as an html file. Check how your webpage looks like by opening the file in a web browser. The list of commands/tags we are using for this class is shown in the document below. We will go over each one and write down the definitions to them in class. |
Notice how "writeln" or "console.log" is not used to display typing when programming in HTML.
|
Your browser does not support viewing this document. Click here to download the document.
![](http://www.weebly.com/weebly/images/file_icons/rtf.png)
html_tags.docx | |
File Size: | 11 kb |
File Type: | docx |
Assignment #1: Using TextEdit
Create a profile about yourself using TextEdit: When a user opens your webpage, your profile must include the following:
1) Centered title of your name and portrait (2 marks)
2) A short paragraph about yourself (description about you--age, height, etc. favourite colour, hobby, what you want to do after high school, dream career) (1 mark)
3) A table organizing the same information into a chart with rows and columns (1 mark)
4) A welcoming title at the top of the window. (1 mark)
Total: Out of 5 marks
1) Centered title of your name and portrait (2 marks)
2) A short paragraph about yourself (description about you--age, height, etc. favourite colour, hobby, what you want to do after high school, dream career) (1 mark)
3) A table organizing the same information into a chart with rows and columns (1 mark)
4) A welcoming title at the top of the window. (1 mark)
Total: Out of 5 marks
When we use a more powerful platform to program in the same language, there are more features that help ease your pain from not knowing where the errors are. Adobe Dreamweaver is like a real time engine that has a feature that lets you split your coding screen with how it actually looks on the internet browser. Give this engine a try with the following assignment below.
|
Assignment #2: Using Adobe Dreamweaver
Part 1:
Google search “common Javascript functions” and select the 2nd result “Top 10” website. Browse through the functions listed here and choose one that you like. Analyze the script and explain what each part of the code does to the program. Part 2: Copy or create a similar function saved as a Javascript file in Adobe Dreamweaver. Then create a website using HTML code and INTEGRATE your javascript function into the webpage. If you are stuck on this step, follow this link: https://www.w3schools.com/js/js_whereto.asp Part 3: Your website must include 5 additional html functions: Sound, Images, Links, Text, and 1 more of your choice. Out of 14 marks. |
Skills Mastery List: see rubric below
Chosen Javascript Function explained: (The script has a lot of lines) Choose sections of code from the beginning to the end and highlight what each section does. Students usually have at least 10 points explained on what the gist of the program does. I will choose your best 5 points and give you a mark out of 5. (5 marks) Integration explained: (Does the script run properly? Embeded in the proper position in the script? Placed properly in the right position in the folder? (3 marks) Additional HTML functions included? (5 marks) Does your HTML webpage run without errors (1mark) |