Web 2
9-25
Objective: Students will be able to learn how not to commit copyright infringement, and plagiarism. Write a one page paper on how to avoid committing Copyright Infringement, and Plagiarism.
Copyright infringement includes the unauthorized or unlicensed copying of a work subject to copyright. ( Tech Law Journal) Plagiarism is using someone else's work or ideas without giving proper credit.
What is Plagiarism and How Do I Avoid it?
https://www.youtube.com/watch?v=EbWKUiLjGBs
Copyright Infringement - What if Someone Infringes Your Copyright?
https://www.youtube.com/watch?v=uxdrzOz0A0A
9-18 through ?
Objective: Students will be able to brush up on their HTML5 & CSS3 skills. The HTML Form with the JavaScript is for Web 3 only...at this time.
Link to Starter Files
https://drive.google.com/file/d/1Qe9Ku14sSrjmC842B9QMK99hS-dfKmx1/view?usp=sharing
Practice using 3 different fonts.
Adding custom fonts: https://www.w3schools.com/cssref/css3_pr_font-face_rule.php
Basics of CSS Grid:
Grid Container and Items:
The container with display: grid; becomes a grid container.
Direct children of the container become grid items.
Grid Lines and Cells:
A grid is divided into horizontal and vertical lines called grid lines.
The spaces between two adjacent horizontal and vertical lines form grid cells.
Grid Template:
Use grid-template-columns and grid-template-rows to define the size of columns and rows.
Example: grid-template-columns: 100px 200px auto;
Grid Gaps:
Set the gap between columns and rows using grid-column-gap and grid-row-gap, or shorthand grid-gap.
Example: grid-gap: 10px;
Placing Items:
Grid Area:
Use grid-template-areas to assign names to grid areas.
Place items in these areas using grid-area property.
Grid Column and Row:
Use grid-column and grid-row to place items in specific columns and rows.
Example: grid-column: 2 / 4; (item spans from column line 2 to column line 4)
Auto Placement:
Items can be automatically placed using grid-auto-columns and grid-auto-rows.
Responsive Design:
Media Queries:
Utilize media queries to make your grid responsive.
Adjust the grid structure or sizes based on the screen width.
Alignment and Justification:
Alignment:
Use justify-items and align-items for aligning items within their grid cells.
Example: justify-items: center; align-items: center;
Justification:
Use justify-content and align-content for justifying the entire grid.
Example: justify-content: center; align-content: center;
CSS Grid Functions:
Repeat Function:
Use repeat() function to simplify the definition of columns or rows.
Example: grid-template-columns: repeat(3, 1fr); (three columns with equal width)
Minmax Function:
Combine minmax() function with auto-fill or auto-fit for flexible sizing.
Example: grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
Browser Support:
Browser Compatibility:
CSS Grid is widely supported but check compatibility on caniuse.com for specific features.
9-9-24
Objective: Students will be able to complete JS lessons at w3schools by creating an account (see the link).
Web1- Quiz1 - 2024
https://www.quia.com/quiz/8505862.html
9-3-24
Objective: Students will be able to complete HTML exercises at w3schools by creating an account (see the link). Note: You will be quizzed on some of the basics that you should know.
8-26-24
Objective: Students will be able to create Gmetrix accounts and login to access HTML and CSS exercises. Note: You will be in Gmetrix all this week.
8-20-24
Objective: Students will be able to create a basic HTML page by using the code example as well as w3schools.
Add a background color
Add an <h2> tag
Add an unordered list
Add a photo
Add a video:
<iframe width="560" height="315" src="https://www.youtube.com/embed/jhGHXAnNNzM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
8-14-24 to 8-16-24
Objective: Students will be able to create a Snowman using graphic design tools. All students must be familiar with these tools. Your grade this week will come from submitting your Classroom Guidelines online form.
***4th Period
8-14-2024
Objective: Students will be able to practice writing HTML by setting up the file structure and placing the HTML file in the root folder, etc.
Learn by Doing
Beginning HTML
File Structure
Learning file structure is a very important aspect of learning HTML. This will focus on file structure.
I would like to explain how a website is structured in layman’s terms. A website consists of a root folder that contains files with code in them (HTML, CSS, JS, etc.) that can be linked to one another. I will further condense this explanation to ‘Code inside of Files inside of Folders’.
We will now create a root folder for our website. Follow the steps below exactly.
1) Right click (on the desktop) > New Folder
2) Rename your folder to: Root_Folder (FYI, you will have to double click on the name of the folder to rename it).
3) Open TextEdit or any text file editor > Create a new file and save it as: index.html
4) Type the code shown below in your index.html file that you just created.
How do I write HTML on Mac?
Create an HTML file
In the TextEdit app on your Mac, choose File > New, then choose Format > Make Plain Text.
Enter the HTML code.
Choose File > Save, type a name followed by the extension . html (for example, enter index. html), then click Save.
When prompted about the extension to use, click “Use . html.”
HTML headings are defined with the <h1> to <h6> tags:
Example
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links
HTML links are defined with the <a> tag:
Example
<a href="http://www.w3schools.com">This is a link</a>
***Google how to add a header, a footer and some menu links.***
From w3schools - Example:
A header for an <article>:
<article>
<header>
<h1>A heading here</h1>
<p>Posted by John Doe</p>
<p>Some additional information here</p>
</header>
<p>Lorem Ipsum dolor set amet....</p>
</article>
TBA
Objective: Students will be able to create the webpages below and make sure the code works properly.
