The above logo was created on cooltext.com

HTML Assignment 1 - Movie

(OR TV Series OR Book)

Set Up

1. Create a new file called assign1.html inside your current Client Side project.
2. Copy the skeleton and Style tags from our w3schools start page.
3. Add a link from your index.html page to your new file.

<a href="Assign1.html">As1 - Movies</a> 

Quick link to start tags: https://www.w3schools.com/css/tryit.asp?filename=trycss_default 

Quick link to colors:https://www.w3schools.com/colors/colors_names.asp 

Quick link to fonts:https://www.w3schools.com/howto/howto_google_fonts.asp

First 80%

Text and Text Containers (40%)

Using an <h1> tag, give the page the headline with the title of your movie

Add an open and close Heading 2 tag <h2></h2> then inside:

• Place a picture of the "movie poster" for your movie. The image should be set to about 200 pixels in height.  
• You will likely wonder why you are using a heading tag for an image. Good question!  We are going to style this tag later and we want this image to be affected by that style.

Add another open and close paragraph tag <p></p> then inside:

• Write 3ish sentences summarizing the movie. This can be copied from another website but if you do so, add the web address into the end of your paragraph.

Add another open and close paragraph tag <p></p> then inside

• Write 3ish sentences about why you like the series and/or your favorite characters.  If you are not very good at writing, feel free to use an A.I. tool to help you write this paragraph.  If you do, add a sentence such as "This content was created with the help of A.I."  Suggestion: Tell the A.I. what you like about the movie and get it to craft the paragraph for you.

Adding Styles Styles

Find a color scheme using color.adobe.com in one of two ways:

• Go to the explore tab and search for a mood that matches your movie
• OR Extract a color scheme using the Movie Poster

Body style:

• Using a style for the body, set your background color to a color from your color scheme.  

Paragraph Style:

• Using a style for your paragraph tags, set a text color to a color from your color scheme.
• Optional: After adding the heading styles as described below, you can decide if centering the paragraph content looks better centered or left aligned.  Sometimes it looks better if everything is centered, other times it won't.

H1 Style:

• Find a Google Font that matches the mood of your movie. Then use that font-family for your Heading 1 tags
• Align your text to center for H1. Look at the w3schools starter code for the style to align text.

H2 Style

• Align your text to center for H2 (this should also center your movie poster image)

• text-align: center

Adding More Images and Resizing Images (40%)

Place 4 pictures of individual characters on your page below the other text.

• Place 2 pictures on each line.  I recommend therefore setting up 2 paragraph tags, placing 2 pictures in each.
• Need help with images?  Go to w3schools… learn HTML… images

Resize the pictures so that they are all the same height. 

Reminder: Resizing Images

• You can adjust both the height and width by adding one within the img tag.
• Plus, you can specify a number of pixels OR a percentage of the screen.

<img src=”images/pic.jpg” width=”50%”> - Using percentages is one way you can adjust your webpage for smaller screens.

<img src=”images/pic.jpg” height=”300px”> - FYI: Height usually uses pixels rather than percentages. That is because the height of websites change as you add more content and you do not want your pictures growing just because there is more content added somewhere far below.

Final 20% - Learning and Adding Something New

Go to this site:https://www.w3schools.com/html/html_lists.asp

And read about Ordered and Unordered lists.  Use the Try It Yourself buttons to see how the code works.

Create an unordered list with the names of the 4 characters whose pictures you included above followed by any one fact about the character.

Wanda - First appeared in Avengers Age of Ultron

        Iron Man - One of the few character without superpowers

Done Early

There are lots of custom logo makers that let you generate cool text for your websites.  Two I have used are:  https://textcraft.net/ (more modern but a bit trickier to use) and https://cooltext.com/ (easier but definitely old school). The logos at the top and bottom of this doc were both made with cooltext.com.

Suggestion: Imagine you have a YouTube channel that reviews movies.  Play around with one or both of the sites and make a logo for your channel that you can add to the bottom of your page.