1. Just for fun before we get started:
2. What did you think about some of the code tutorials you participated in on Tuesday and Wednesday? Why did you pick certain ones? What are you most looking forward to learning this year- building websites, creating mobile apps, creating games, creating mobile websites? Why?
Concluding code week group activity with Hopscotch and Apple TV- everyone will add something to a computer program we create on the iPad.
Mystery activity- let’s start by taking pictures of yourselves.
3. Let’s look at some more HTML tags:
I also like http://www.htmldog.com/guides/html/
4. Let’s practice- fix this:
You are going to fix the following code. Replace the incorrect code with the correct code.
To start, open a new, blank Notepad or Notepad ++ file. Copy and paste the following code. Then begin correcting the code.
<! DOCTYPE html>
<title>Where does the title belong?</title>
</p>Is this paragraph code correct?<p>
<h1>Is this headline correct?</h2>
<image src=”mustang1.jpg” />
<p><a link=”http://www.medfordpublicschools.org/”>What is wrong with this link to the school website?</a></p>
<p><strong>Just some bold text in a paragraph, right?</p></strong>
<!– Something is wrong with this comment –!>
<em><p>Make sure to save this file correctly as a webpage</p><em>
<p>Someone help me, I don’t want to be italicized!</p>
<li>bullet list item</li>
<li>bullet list item<li>
</li>bullet list item</li>
<li>numbered list item</li>
<li>number list item</li>
<li>number list item</li>
Learning HTML and CSS
HTML and CSS are the language of the internet. Working together, they tell a browser (Firefox, Internet Explorer, Chrome, Safari) how your website should look. They control things like what your text looks like, the font, the layout of the page, etc.
We have already begun practicing with some very basic HTML tags and will continue to do so today.
Also, Code Guy shows us the parts of a webpage and where they belong.
What is all of this??
This is always the very first thing in a webpage. It basically tells the browser what version of the markup language the page is written in. This is critical and necessary so the browser will display the webpage correctly. The above code is for HTML5. (Wait, what is that?)
More info: http://www.w3schools.com/html/html_intro.asp
This is the very first and very last html tag your webpage will have. It’s basically telling the browser this is an HTML document and should be read accordingly. <html> is your very first tag and </html> is your very last tag. All of your content MUST be between these two tags or it will not display correctly.
The head tag generally contains information that will not be visible on your webpage, with the exception of the title, which appears in the very top of your browser.
The title tag is where the title of your website goes. For example: MHS Web Design on this website.
You will see this in the very top area of your browser window or tab.
These two tags are very important and will be close to your first and last tags, the <html></html> tags. Everything that is visible will be in the <body></body> section.
Basic HTML tags
Most HTML tags come in pairs:
<p></p> Paragraph tags. Example:
<p>The Medford Public Schools is a caring educational partnership of school, family and community designed to ensure that all students are afforded a safe and healthy learning environment in which they develop the knowledge, skills and attitudes to reach their full academic and personal potential. This partnership is dedicated to providing all students with a 21st century education that will enable them to be life-long learners and contributors to a diverse and rapidly changing world.</p>
<strong></strong> Bold text. Example: <strong>MHS Web Design</strong>
<em></em> Italicized text. Example: <em>MHS Web Design</em>
<br /> Adds a line break (skips to next line).
<a href=”http://www.medfordpublicschools.org/”> This is a link to the Medford Public Schools webpage. Example:
<a href=”http://www.medfordpublicschools.org/>Click here to go to the Medford Public Schools website</a>
To open a link in a new window or tab:
<a href=”http://www.medfordpublicschools.org/” target=”_blank”>
<img src=”picture.jpg” /> Code for adding an image. You can have .jpg, .gif, .png, etc.
“Nesting” HTML tags
Look at the examples above. Each example has a paragraph tag and another tag inside it. Notice how the paragraph tag is “opened” first and “closed” last while the other tags are closed in between the paragraph tags. HTML tags are always closed in reverse order, like this: <1><2></2></1> or <1><2><3></3></2></1>
List of HTML tags
Note: some of these tags won’t be supported in HTML (wherever it says “deprecated”).
Finally, let’s add a favicon to our page. Favicons are the tiny icons that appear on the top left next to a website’s name and URL.
First, you must design your favicon in some kind of image editor such as Photoshop. You might also be able to find free favicon generators online. Try this website: http://favicon-generator.org/. It will take a picture or graphic you have and turn it into a favicon. The picture must be a perfect square (same length and width). To do this open up your image with either Photoshop or whatever image editor you have on your computer and crop and resize your image to make sure it’s the same length and width. If you want, click here to download the Mustang logo to use (it is a perfect square).
If you don’t use an image that is a perfect square you will end up with a distorted favicon because the favicon it generates will be 16 pixels by 16 pixels.
Again, pay attention to file name and file type. Save your favicon as favicon.ico and save it in the same place as your index file (desktop or My Documents).
Now that you have created your favicon, step two is adding code to your webpage.
Add this to your head section:
<link rel=”icon” type=”image/x-icon” href=”favicon.ico”>
(If you copy and paste this, you will have to delete the quotation marks and add them again in Notepad++)
Once you have done that, save your index file and refresh the browser. Hopefully you will see your new favicon!
1. We are going to start here- click Remixes with X-Ray Goggles after you go to https://goggles.webmaker.org/en-US.
2. We looked at web code and altered it on that page- let’s check out some more pages. How can you view a webpage’s code? What do you notice? Does anything look familiar or recognizable?
3. Webpages are created using HTML and CSS. HTML and CSS tell a browser, like Chrome or Firefox, how a webpage should look and how to display its content. In very general terms, HTML controls the layout of content on a page while CSS controls how it looks (color, font, size, etc.)
Let’s continuing experimenting with Mozilla Thimble- https://thimble.webmaker.org/en-US.
4. Other tools- I talked about Notepad++ last week. Let’s take a look at it. To practice learning HTML and CSS we’re going to code in Notepad++ and preview our work in Firefox. To open Notepad++, go to the start menu or check your desktop (a short cut might be there).
Notepad++ is a free HTML editor. I like it because its helps with code by providing line numbers and color highlights. You can of course use regular old Notepad, which comes with every PC, or if you have a Mac you can use Text Edit.
How you save your file matters when working with Notepad or Notepad++. In order for your file to be understood as a webpage, and not just a plain text file, it must be saved with the extension .html. Once you have saved your file correctly and the computer understands it to be a webpage you can preview the webpage file in a browser. Exciting!
Some questions- how is your Notepad++ file different than what you did in Mozilla Thimble? When you preview your file in the browser, is it live? How is all of this different from your blog on the class website? How did you get your blog online and how might you get today’s file online?
Remember one of your first activities from the beginning of the year- your pictures are now finally on the MHS Alumni Association website.
They were combined using the same app that was used to make the turkey collages above- Pic Stitch.
Mozilla Thimble exercises
Before we start building a webpage from scratch, let’s try some fun examples to get you used to looking at and editing website code:
Go to https://webmaker.org/en-US/starter-makes and choose a project to work on.
These projects are set up so you can change the code on the left and see how it looks on the right.
Make sure you read the text on the left- there are important details and instructions!
Done messing with those tutorials?
Click Remixes with X-Ray Googles from the top menu.