Class

Class Notes

1/13/2021

1/13/21

What are Pages

Files of code on your hosting that is accessed with a URL being typed into a browser. The URL’s path to the file is a slug. It is the slugified version of your page’s title (lowercase, dashed, short).

 

You can type that in to access any page quickly without using your navigation.

Adding Pages to Menu

An automatic list of pages (via links) usually in your header that help the user navigate your site.

  • You can create a menu in customize>menu
  • Add all the pages you want on the menu
  • Drag a link to the right to make it a child in a dropdown format
    • Do this as much as possible to keep your menu very short
    • The less options the easier your navigating
  • While Beaver Building your header, you can add a menu module and choose whichever menu you created

Creating Pages

  • You can view all your pages on in the wordpress admin.
  • Press add new to add a new page.
  • Type title and publish
  • To the right of the title you can change the details of the page (date, status, featured image to be generated when you share your link)
  • Open in Beaver Builder
    • Don’t add your content on the backend of the page (unless it’s a post or product), although that would technically work, opening it in Beaver Builder is the easiest way to design the layout of the page. If you did add content to the backend of the page, then the design on the front end would be whatever your theme has established.

1/12/2021

1/12/21

Headers and Footers

Top section with your logo and navigation menu that usually is the same on every page. The bottom section is called the footer

 

WordPress has a header option in the Customize section of the site. That will give you a header, but it will be very limited in styling (unless you know CSS). That’s why I installed the plugin Beaver Themer to all your sites.

 

Beaver Themer lets you create layouts/templates for archive pages, template an entire post type, product pages, 404 and search pages, and create parts like headers and footers. Field connections allow you to connect your layouts to the data inside each type of template.

 

So it’s not just headers and footers that you can edit in Beaver Builder, it’s also the autocreated pages that WordPress creates for you.

 

Your whole website is made up of many pages. Login page, default posts, blog search page, and more. And WooCommerce that I installed to let you build a store automatically created pages like product pages, category pages, check out page, ect.

 

Beaver Themer let’s you make a template that will be applied to all those pages that WordPress has designed for you

 

Class demonstration of how to edit Beaver Themer and the Header. Q & A

Homework:

Create or Begin creating your website's header. This is done by creating a beaver themer layout, setting the location to entire site, publishing, and designing the header in beaver builder. - due 1/14

1/11/2021

1/11/21

General Site Settings

Title Tags found in the Head Tag

WordPress, and other CMS’s allow you to change the head tag of your html documents.

 

HTML= language for content

 

All websites are made, ultimately, from an HTML document or file, containing HTML code. Which is why we can look at the source code of any page on the internet.

 

Here is the structure of all those HTML documents:

 

<!DOCTYPE html>

<html lang="en">

<head>

<title>Title of the document</title>

</head>

<body>

 

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

 

</body>

</html>

 

The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.

Metadata is data about the HTML document. Metadata is not displayed.

Metadata typically define the document title, character set, styles, scripts, and other meta information.

The following elements can go inside the <head> element:

  • <title> **required in every HTML document**
    • The <title> tag defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab.
    • The contents of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.
  • <style>
    • The <style> tag is used to define style information (CSS) for a document.

<style>

h1 {color:red;}

p {color:blue;}

</style>

  • <base>
    • The <base> tag specifies the base URL and/or target for all relative URLs in a document.

<head>

<base href="https://www.w3schools.com/" target="_blank">

</head>

 

<body>

<img src="images/stickman.gif" width="24" height="39" alt="Stickman">

<a href="tags/tag_base.asp">HTML base Tag</a>

</body>

 

  • <link>
    • Link to an external style sheet:

<head>

<link rel="stylesheet" href="styles.css">

</head>

 

  • <meta>
    • The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data.
    • <meta> tags always go inside the <head> element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings.
    • Metadata will not be displayed on the page, but is machine parsable.
    • Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services.
    • There is a method to let web designers take control over the viewport (the user's visible area of a web page), through the <meta> tag
  • <script>
    • The <script> tag is used to embed a client-side script (JavaScript).
    • The <script> element either contains scripting statements, or it points to an external script file through the src attribute.
    • Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.

Many of the things you would see in the head tag will be in the general settings of your CMS.

 

**required in every HTML document**

  • The <title> tag defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab.
  • The contents of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.

Seeing settings in wordpress

 

Creating homepage in Beaver Builder

1/7/2021

1/7/21

What are these files?

HTML: Content

CSS: Style

JavaScript: Action/Dynamic

 

But mainly built with PHP script :

PHP is a scripting language, whereas HTML is a markup language. HTML determines the general structure and content of a web page, while PHP provides dynamic content through scripts. PHP is typically a server-side language, while HTML is client-side.

PHP is a programming language used in web design to create dynamic web pages. HTML provides the foundation and structure for a web page, while various programming languages allow you to create the inner workings of that page. There is no shortage of languages that can get this work done for you, and PHP is one of the most popular ones around. PHP scripts are powerful enough to create almost anything you need on your page. It is also flexible and easy to learn. With care, a novice web developer can use PHP to make their pages hum.

 

Database:

A database is like a storage cupboard with many shelves. It stores files in a structured manner. By default, the database has eleven tables. The tables can be thought of storage spaces inside a cupboard. The tables will expand as you begin using the WordPress website, adding more posts, attracting comments to the site. Database tables have a default prefix wp_ which can be changed at will. These tables can be optimized and repaired, and they can also be exported or backed up using a backup plugin like BlogVault. Each table has its own function, and we are going to discuss these functions below. But first, let’s see how you can access the database.

To access your database, you will have to visit your web host account. Log in to your web host and go to a page called cPanel. There, you should be able to find an option for phpMyAdmin. Select that, and a page will open that would look something like this:

Now let’s take a look at what each of these tables contains:

Table 1: wp_commentmeta

wp_commentmeta stores metadata for comments left on your WordPress site. Information on things like whether a comment is approved, or pending or trashed are stored in this table.

Table 2: wp_comments

wp_comments stores information surrounding comments left on your account. It includes unique number assigned to each comment, email addresses, IP Addresses and URL for the comment author, pingback or trackback, replies to comments, time and date of the comment, among other things.

Table 3: wp_links

wp_links takes care of blogrolls (a list of hyperlinks to other blogs or websites) that was fashionable in the past. WordPress websites had blogroll by default in the past, but since version 3.5 there have been no blogrolls. The table remains in the database for backward compatibility, i.e. if someone is still using older versions of WordPress that has blogrolls, this particular table will help taking care of the blogroll feature.

Table 4: wp_options

In your WordPress dashboard, there is an option called Setting. wp_options stores data related to that Settings feature. If you select Setting from your WordPress dashboard, you’ll see options that enable you to change site title, tagline, site address (URL), etc. This information is stored in the wp_options table. Let’s see the wp_options table on my website.

I visited the Setting option from my WordPress dashboard. As you can see in the picture above, my Site Title is ‘My Blog’, and the Tagline is ‘Just another WordPress site’. I found that the same information is stored in my wp_options table. Look at the picture below.

Table 5: wp_postmeta

wp_postmeta stores metadata (like Post ID, meta ID, among other things) for posts and pages. Identification numbers allotted to each post helps to store them in a structured manner. The IDs also makes it easier to find posts and web pages when they are needed.

Table 6: wp_posts

wp_posts stores information from posts, pages, and the navigation menu. How is it different from wp_postmeta? In wp_postmeta, you’ll find unique identification number allotted to posts and pages whereas in wp_posts consists of information like post name, author name, post date among other things. Let’s see how the information of a post is stored in this table.

I published a post called ‘Structure of a WordPress Site’ on my website.

As soon as my post was published, information of the post appears on the wp_posts table.

Table 7: wp_terms

wp_terms stores three things: categories for tags of posts, categories of posts and link categories. To understand what these things are, let’s take a look at the pictures below:

Tags of posts

Post Categories

Link Categories

In the three pictures above, we have:

  • WP Security Audit Log (tag)
  • Review (post categories)
  • Uncategorized (post categories)
  • Blogroll (link categories)

These tags, post categories, and link categories are present in the wp_terms table of my database.

Table 8: wp_term_relationships

wp_term_relationships stores relationship data for categories and tags from the wp_terms table. What does that mean? Let’s say there is a post on your website named A. It belongs to the category 9. This table helps determine that post A belongs to 9 categories and not some other category.

Table 9: wp_term_taxonomy

wp_term_taxonomy stores descriptions of the taxonomy (tag, link, or category) for the entries in the wp_terms table. This table helps differentiate between tags, or links or categories.

Table 10: wp_usermeta

wp_usermeta stores metadata of a WordPress user. For instance, your user ID is 1, and your fellow admin’s user ID is 2. This particular information is stored in the wp_usermeta table.

Table 11: wp_users

wp_users stores data for WordPress users. How is it different to wp_usermeta? Well, the wp_usermeta table stored unique identification number of users but the wp_users table stores other user information like the Username, User Login Name, Email address, etc.

To give you an idea, I created a new user on my WordPress website.

I looked up my wp_users table and saw information of the new user had been stored in there.

1/6/2021

1/6/21

WP Files Hierarchy/Architecture

These are the files that are unique to a particular WordPress installation and contain all of your website data.

So if you want to take a backup of your WordPress website then take a backup of the following installation files and folders.

(these were shown yesterday in SG in Site Tools> File Manager)

/wp-content/

This folder contains all of your plug-ins and themes. It also contains all of your blog posts and comments (in the ‘cache’ sub-folder). So if you want to take a back up of your WordPress site then first take a back up of this folder.

/wp-admin/

The wp-admin folder contains administrative files that power the WordPress dashboard. The first thing that you see after logging into your WordPress site is the WordPress dashboard

 

/wp-includes/

wp-includes contains everything needed to run WordPress via the frontend ( and then some ). It is the territory of WordPress Core, and as the adage goes, never modify core under any circumstances.

/wp-config.php

This file stores your WordPress database information like database name, database username, database password, etc. It is a very important file and can easily take down your website. So don’t mess with it unless you know what you are doing.

/.htaccess

Another important file for server access control. You can find this file in the root folder via your FTP. It is a very important file and can easily take down your website. So don’t mess with it unless you know what you are doing.

/favicon.ico

This is your website’s favicon file. You can find this file in the root folder via your FTP.

/robots.txt

This file is used to block specified files and folders from being crawled and indexed by Google.

 Website Projects

 

You were given a sheet with your user, password, and login page url.

 

Homework: Login to your site and click around.

 

Remember the project rules:

 

  • You need more than one page. 
  • It has to be responsive (function and look good on mobile devices).
  • You can only use the boring template that I will preinstall.
  • Do not install plugins!

1/5/2021

1/5/21

Installing WP Hosting Account

Depending on the host these could all be different, but overall it will go something like this

 

*Before anything else: Make sure your domain is pointing to your host (your dns settings have to have nameservers using nameserver 2 codes and/or a record using the IP address of your host)

 

  1. Log into hosting account
  2. Find cpanel or site tools (siteground will give you different site’s that you’ve made where you can access their site tools)
  3. In cpanel find WordPress (softaculous)
  4. Using their installer (softaculous) Press “install wordpress”
  5. It will ask you what domain or subdomain to use
  6. It will ask where in your server’s file to install WP’s files
  7. Add username, password, and email for the admin user account the installer will automatically create
  8. Set language of the site
  9. Install!

 

What the installer is doing for you:

 

  • Uploading the open source WP files
  • And creating a database

 

1/4/2021

1/4/21

Review: what do I need to create a website? Hosting, CMS, and domain.

 

Your websites:

  • Domain/Registrar- GoDaddy to SiteGround (your-sites-name.bradenhamiel.com)
      • If you want to actually have an account yourself after the project is complete I can help you get a domain and hosting and we can transfer the site to your accounts.

What is WordPress?

At its core, WordPress is the simplest, most popular way to create your own website or blog. In fact, WordPress powers over 38.8% of all the websites on the Internet.

Remember that WP.org and .com are different.

  • WordPress.org, often called self-hosted WordPress, is the free, open-source WordPress software that you can install on your own web host to create a website that’s 100% your own.
  • WordPress.com is a for-profit, paid service that is powered by the WordPress.org software. It’s simple to use, but you lose much of the flexibility of the self-hosted WordPress.

Who Made WordPress And How Long Has It Been Around?

WordPress was created as a standalone project all the way back in 2003, originating as an offshoot of a previous project called b2/cafelog.

WordPress is open-source software, so nowadays it’s made by a huge community of contributors. But if we were to trace WordPress’ origins back to its roots, its original creation was a collaboration between Matt Mullenweg and Mike Little.

Since then, Matt Mullenweg has largely become the face of WordPress. And he’s also the founder of Automattic, which is the company behind the for-profit WordPress.com service.

Made on WP:

  • Whitehouse.gov
  • Microsoft
  • The Rolling Stones

 

Why Should You Use WordPress?

WordPress Is Free And Open Source

WordPress Is Extensible

Even if you aren’t a developer, you can easily modify your website thanks to WordPress’ huge ecosystem of themes and plugins:

  • Themes – these primarily change how your website looks. The foundation of your styling that drag and drop plugins like beaver builder need to change layouts. You can only have one activated at once (as opposed to plugins which are multiple and constantly working).
    • THEME USED FOR YOUR SITE IS BEAVER BUILDER
  • Plugins – these primarily change how your website functions. Plugins can be something small, like a contact form, or huge, like creating an eCommerce store.
    • PLUGIN LIST FOR YOUR SITE:
      • Beaver builder (4 plugins)
      • Wordfence Security
      • WooCommerce Store
      • SiteGround Optimizer

Currently, there are over 50,000 free WordPress and 5,000 free WordPress themes, as well as tons of premium options. That to say – you have plenty of choices! Here is a hand-picked list of the best WordPress plugins.

It’s Easy To Find WordPress Help

Because WordPress is so popular, it’s easy to find help if you ever run into any issues. There are heaps of…

  • Blogs
  • Tutorials
  • Forums
  • Facebook Groups
  • Developers

…that you can turn to for free and paid help if needed.

Student site example walk through:

A template is already installed, you use another template. You have to open it in BB and change it yourself.

PLUGIN LIST FOR YOUR SITE:

  • Beaver builder (4 plugins)
  • Wordfence Security
  • WooCommerce Store
  • SiteGround Optimizer

THEME LIST FOR YOUR SITE:

  • Beaver Builder

Our lessons will be explorations into your sites and diving deeper into how they work. Almost every class will have a time at the end to work on your sites. You can use the computers at the sound booth under my supervision. Bring laptops or ipads in to work on these things at school with permission. 

The first things we need to do are edit our site settings. Everything from site title to robot viewing.

12/16/2020

Website Project

Develop and design an optimized website that reflects your topic. Due March 25th (3rd quarter end)

Limited quizzes until that date, so the project will be your make up most of your 3rd quarter grade. Grade is generously based on:

General Design - 50%

Organization - 30%

Optimization - 20%

 

Development

  • Hosting- SiteGround
  • CMS- WordPress.org
  • Domain/Registrar- GoDaddy to SiteGround (your-sites-name.bradenhamiel.com)
      • If you want to actually have an account yourself after the project is complete I can help you get a domain and hosting and we can transfer the site to your accounts.
  • Page Builder- Beaver Builder
  • Ecommerce- WooCommerce
  • Graphics- Canva or Microsoft paint (any editor you want)
  • Photos- unsplash, pixabay, ect.. Just make sure you have the legal right to post it on your site and that you follow the compression and cropping notes before uploading to your site.

Rules

  • You need more than one page. 
  • It has to be responsive (function and look good on mobile devices)
  • You can only use the boring template that I will preinstall.
  • Do not install plugins!

We will be going through the project tasks with teacher reviews, peer reviews, and general tips and lessons on optimization until March 25th. Class time will be focused on preparing your site. Some classes up to the end of the project you will be allowed to bring a device into school and work on the project during study halls with permission.

 

By the end of the school year I will delete the sites after saving screenshots so you can still have images of it. If you want invest in the website after the project, I can help you get your website and domain transfered to your own hosting and/or registrar that you pay for. Usually hosting is about $5-15/mo and domains usually cost $5-20/yr. not including privacy protection which is usually over $10/yr.

 

12/15/2020

In class demonstration of domain registrars and hosting via GoDaddy and SiteGround.

 

Domain Registrars

Hold a domain that you pay yearly for.

 

Hosting

Hold the website files and CMS. Contains an IP address and nameserver info so you can point domains to your hosted site.

 

The DNS settings are controlled wherever your nameservers are pointed.

 

The DNS settings allow us to use temporary domain pointing via A records. A records need the IP address of where the site is hosted to point.

12/14/2020

Reviewing URLs

 

Find a domain that you want to use for your site.

We can use name.com to see if it’s available.

 

TLD

A top-level domain is one of the domains at the highest level in the hierarchical Domain Name System of the Internet. The top-level domain names are installed in the root zone of the name space.

 

Examples of popular TLD’s:

 

TLD Common Uses
.com Most popular, usually used for corporations, but can be used for any type of entity.
.org Usually used by organizations (mainly nonprofits).
.net Used for networks especiatlly computer networks.
.edu Used for formal schools and universities.
.gov Limited to United States governmental entities and agencies as well as qualifying state, county and local municipal government agencies.

 

ICANN

The Internet Corporation for Assigned Names and Numbers (ICANN /ˈaɪkæn/ EYE-kan) is an American multistakeholder group and nonprofit organization responsible for coordinating the maintenance and procedures of several databases related to the namespaces and numerical spaces of the Internet, ensuring the network's stable and secure operation.

 

They make rules about domains to keep them safe. For example, they don’t let you transfer a domain until after a waiting period after buying it or transferring it.

 

12/10/2020

Not in Codecademy:

URL (Uniform Resource Locator)

address of a given unique file that is connected to the internet.

 

Basics: anatomy of a URL

Here are some examples of URLs:

https://developer.mozilla.org

https://developer.mozilla.org/en-US/docs/Learn/

https://developer.mozilla.org/en-US/search?q=URL

Any of those URLs can be typed into your browser's address bar to tell it to load the associated page (resource).

A URL is composed of different parts, some mandatory and others optional. Let's see the most important parts using the following URL:

http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument

http is the protocol. The first part of the URL indicates which protocol the browser must use. A protocol is a set method for exchanging or transferring data around a computer network. Usually for websites it is the HTTP protocol or its secured version, HTTPS. The Web requires one of these two, but browsers also know how to handle other protocols such as mailto: (to open a mail client) or ftp: to handle file transfer, so don't be surprised if you see such protocols.

 

You need to point your domain to your IP.

 

Nameservers- permanent

A record- temp

MX record- email

 

www.example.com is the domain name. It indicates which Web server is being requested. Alternatively, it is possible to directly use an IP address, but because it is less convenient, it is not often used on the Web.

:80 is the port. It indicates the technical "gate" used to access the resources on the web server. It is usually omitted if the web server uses the standard ports of the HTTP protocol (80 for HTTP and 443 for HTTPS) to grant access to its resources. Otherwise it is mandatory.

/path/to/myfile.html is the path to the resource on the Web server. In the early days of the Web, a path like this represented a physical file location on the Web server. Nowadays, it is mostly an abstraction handled by Web servers without any physical reality.

?key1=value1&key2=value2 are extra parameters provided to the Web server. Those parameters are a list of key/value pairs separated with the & symbol. The Web server can use those parameters to do extra stuff before returning the resource. Each Web server has its own rules regarding parameters, and the only reliable way to know if a specific Web server is handling parameters is by asking the Web server owner.

#SomewhereInTheDocument is an anchor to another part of the resource itself. An anchor represents a sort of "bookmark" inside the resource, giving the browser the directions to show the content located at that "bookmarked" spot. On an HTML document, for example, the browser will scroll to the point where the anchor is defined; on a video or audio document, the browser will try to go to the time the anchor represents. It is worth noting that the part after the #, also known as the fragment identifier, is never sent to the server with the request.

Note: There are some extra parts and some extra rules regarding URLs, but they are not relevant for regular users or Web developers. Don't worry about this, you don't need to know them to build and use fully functional URLs.

You might think of a URL like a regular postal mail address: the protocol represents the postal service you want to use, the domain name is the city or town, and the port is like the zip code; the path represents the building where your mail should be delivered; the parameters represent extra information such as the number of the apartment in the building; and, finally, the anchor represents the actual person to whom you've addressed your mail.

 

12/09/2020

*Text in red is on the quiz.*

Intro to HTML- Study Guide

HTML stands for HyperText Markup Language:

  • A markup language is a computer language that defines the structure and presentation of raw text.
  • In HTML, the computer can interpret raw text that is wrapped in HTML elements.
  • HyperText is text displayed on a computer or device that provides access to other text through links, also known as hyperlinks. You probably clicked on a couple of hyperlinks on your way to this Codecademy course.

Ex 2: Elements

HTML is composed of elements. These elements structure the webpage and define its content. Let’s take a look at how they’re written.

 

The diagram to the right displays an HTML paragraph element. As we can see, the paragraph element is made up of:

  • An opening tag (<p>)
  • The content (“Hello World!” text)
  • A closing tag (</p>)

A tag and the content between it is called an HTML element. There are many tags that we can use to organize and display text and other types of content, like images.

Let’s quickly review each part of the element pictured:

  • HTML element — a unit of content in an HTML document formed by HTML tags and the text it contains.
  • HTML Tag — the element name, surrounded by an opening (<) and closing (>) angle bracket.
  • Opening Tag — the first HTML tag used to start an HTML element. The tag type is surrounded by opening and closing angle brackets.
  • Content — The information (text or other elements) contained between the opening and closing tags of an HTML element.

Closing tag — the second HTML tag used to end an HTML element. Closing tags have a forward slash (/) inside of them, directly after the left angle bracket.

 

Ex 3: The Body

One of the key HTML elements we use to build a webpage is the body element. Only content inside the opening and closing body tags can be displayed to the screen. Here’s what opening and closing body tags look like:

<body>

 

</body>

Once the file has a body, many different types of content – including text, images, and buttons – can be added to the body.

<body>

<p>What's up, doc?</p>

</body>

Work:

  1. Add a body to your web page using the <body> element.
  2. Add the following code between your opening and closing body tags:

<p>"Life is very short and what we have to do must be done in the now." - Audre Lorde</p>

Ex 4: HTML Structure

HTML is organized as a collection of family tree (or hierarchy) relationships. As you saw in the last exercise, we placed <p> tags within <body> tags. When an element is contained inside another element, it is considered the child of that element. The child element is said to be nested inside of the parent element.

<body> <- Parent

<p>This paragraph is a child of the body</p> <- Child

</body>

In the example above, the <p> element is nested inside the <body> element. The <p> element is considered a child of the <body> element, and the <body> element is considered the parent.

Since there can be multiple levels of nesting, this analogy can be extended to grandchildren, great-grandchildren, and beyond. The relationship between elements and their ancestor and descendant elements is known as hierarchy.

Let’s consider a more complicated example that uses some new tags:

<body>

<div>

<h1>Sibling to p, but also grandchild of body</h1>

<p>Sibling to h1, but also grandchild of body</p>

</div>

</body>

In this example, the <body> element is the parent of the <div> element. Both the <h1> and <p> elements are children of the <div> element. Because the <h1> and <p> elements are at the same level, they are considered siblings and are both grandchildren of the <body> element.

Understanding HTML hierarchy is important because child elements can inherit behavior and styling from their parent element. You’ll learn more about webpage hierarchy when you start digging into CSS.

Instructions:

  1. Add the paragraph below as a child of the div element.

<p>This paragraph is a child of the div element and a grandchild of the body element</p>

 

 

Ex 5: Headings / Hierarchy

Headings in HTML are similar to headings in other types of media. For example, in newspapers, large headings are typically used to capture a reader’s attention. Other times, headings are used to describe content, like the title of a movie or an educational article.

HTML follows a similar pattern. In HTML, there are six different headings, or heading elements. Headings can be used for a variety of purposes, like titling sections, articles, or other forms of content.

The following is the list of heading elements available in HTML. They are ordered from largest to smallest in size.

  1. <h1> — used for main headings. All other smaller headings are used for subheadings.
  2. <h2>
  3. <h3>
  4. <h4>
  5. <h5>
  6. <h6>

 

The following example code uses a headline intended to capture a reader’s attention. It uses the largest heading available, the main heading element:

<h1>BREAKING NEWS</h1>         |           BREAKING NEWS

*** Not on Codecademy:

I don’t know why they don’t give you this from the get-go, but here is a list of all the HTML Tags you should know. If you have this list in front of you you can make a full (really basic design webpage). Walk through these with them.

 

 

Ex 6: Divs

One of the most popular elements in HTML is the <div> element. <div> is short for “division” or a container that divides the page's code (not visible on page) into sections. These sections are very useful for grouping elements in your HTML together. <div>s can contain any text or other HTML elements, such as links, images, or videos.

(Notice how my children of my div are indented)

<body>

  <div>

<h1>Why use divs?</h1>

<p>Great for grouping elements!</p>

  </div>

</body>

<div>s don’t inherently have a visual representation, but they are very useful when we want to apply custom to our HTML elements.

 

I would group these elements together to add a styling to all of them at once.

Instead of this:

<h1 id=”style”>Who Am I?</h1>

<p id=”style”>My name is Brady.</p>

I can do this:

<div id=”biography”> 

    <h1>Who Am I?</h1>

    <p>My name is Brady.</p>

</div>

Then in my CSS file, I will apply a certain style to the id “biography.”

#style {

    color: red;

}

Then in my CSS file, I will apply a certain style to the id “biography.”

Ex 7: Attributes

“biography” in my code is an attribute. Attributes are content added to the opening tag of an element and can be used in several different ways, from providing information to changing styling. There are different types of attributes; but they all look the same:

<div id=”biography”

The type of attribute is an id and the value is “biography”. It’s kind of like labeling different parts of my page. I separate the code of one part of my page and name the code something using an attribute. Here are the different types and their functions:

Class          Names an element or group of elements, usually for styling.

Be able to name at least one attribute.

Ex 8: Displaying Text

If you want to display text in HTML, you can use a paragraph or span:

 

Paragraphs (<p>) contain a block of plain text.

<span> used to separate small pieces of content that are on the same line as other content.

 

Take a look at each of these elements in action below:

 

<p><span class=”fancy-font”>Self-driving cars</span> are anticipated to replace up to 2 million jobs over the next two decades.</p>

 

In the example above, there are two different <div>. The second <div> contains a <p> with <span>Self-driving cars</span>. This <span> element separates “Self-driving cars” from the rest of the text in the paragraph.

 

It’s best to use a <span> element when you want to target a specific piece of content that is inline, or on the same line as other text. If you want to divide your content into blocks, it’s better to use a <div>.

 

Ex 9: Styling Text

You can also style text using HTML tags. The <em> tag emphasizes text, while the <strong> or <b> tag highlights important text.

 

Later, when you begin to style websites, you will decide how you want browsers to display content within <em> and <strong> tags. Browsers, however, have built-in style sheets that will generally style these tags in the following ways:

 

The <em> tag will generally render as italic emphasis.

The <strong> will generally render as bold emphasis.

 

In grammar class you should have learned when to use these in titles of articles, boats, magazines, ect…

Ex 10: Line Breaks

<br> Makes a space between a line of content on the page.

The spacing between code in an HTML file doesn’t affect the positioning of elements in the browser. If you are interested in modifying the spacing in the browser, you can use HTML’s line break element: <br>.

 

The line break element is unique because it is only composed of a starting tag. You can use it anywhere within your HTML code and a line break will be shown in the browser.

 

<p>The Nile River is the longest river <br> in the world, measuring over 6,850 <br> kilometers long (approximately 4,260 <br> miles).</p>

 

The code in the example above will result in an output that looks like the following:

 

The Nile River is the longest river

in the world, measuring over 6,850

kilometers long (approximately 4,260

miles).

 

-------------------------------------------------------------

Lists:

Ex 11: Unordered Lists

In addition to organizing text in paragraph form, you can also display content in an easy-to-read list.

In HTML, you can use an unordered list tag (<ul>) to create a list of items in no particular order. An unordered list outlines individual list items with a bullet point.

The <ul> element should not hold raw text and won’t automatically format raw text into an unordered list of items. Individual list items must be added to the unordered list using the <li> tag. The <li> or list item tag is used to describe an item in a list.

<ul>

<li>Limes</li>

<li>Tortillas</li>

<li>Chicken</li>

</ul>

In the example above, the list was created using the <ul> tag and all individual list items were added using <li> tags.

The output will look like this:

  • Limes
  • Tortillas
  • Chicken

Ex 12: Ordered Lists

Ordered lists (<ol>) are like unordered lists, except that each list item is numbered. They are useful when you need to list different steps in a process or rank items for first to last.

You can create the ordered list with the <ol> tag and then add individual list items to the list using <li> tags.

<ol>

<li>Preheat the oven to 350 degrees.</li>

<li>Mix whole wheat flour, baking soda, and salt.</li>

<li>Cream the butter, sugar in separate bowl.</li>

<li>Add eggs and vanilla extract to bowl.</li>

</ol>

The output will look like this:

  1. Preheat the oven to 350 degrees.
  2. Mix whole wheat flour, baking soda, and salt.
  3. Cream the butter, sugar in separate bowl.
  4. Add eggs and vanilla extract to bowl.

 

Ex 12.5: Links (not on Codecademy!) aka hyperlinks

<a> tag is used to make normal text clickable. When clicked it will go to another page on the internet.

 

<a href="https://www.w3schools.com">Visit W3Schools.com!</a>

 

target attribute

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

  • _self - Default. Opens the document in the same window/tab as it was clicked
  • _blank - Opens the document in a new window or tab
    • Opening links in new tabs
  • And more...

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

Ex 13: Images

The <img> tag allows you to add an image uploaded to the internet to a web page. Most elements require both opening and closing tags, but the <img> tag is a self-closing tag. Note that the end of the <img> tag has a forward slash /. Self-closing tags may include or omit the final slash — both will render properly.

<img src="https://www.w3schools.com/image-location.jpg" />

 

The <img> tag has a required attribute called src. The src attribute must be set to the image’s source, or the location of the image.

Ex 15: Videos

<video> element requires an opening and a closing tag.

I gave you the wrong code for this. This is the real code to make a video:

<video src="myVideo.mp4" width="320" height="240" controls>

Video not supported

</video>

In this example, the video source (src) is myVideo.mp4 The source can be a video file that is hosted alongside your webpage, or a URL that points to a video file hosted on another webpage.

After the src attribute, the width and height attributes are used to set the size of the video displayed in the browser. The controls attribute instructs the browser to include basic video controls: pause, play and skip.

The text, “Video not supported”, between the opening and closing video tags will only be displayed if the browser is unable to load the video.

12/08/2020

12/15/2020

In class demonstration of domain registrars and hosting via GoDaddy and SiteGround.

 

Domain Registrars

Hold a domain that you pay yearly for.

 

Hosting

Hold the website files and CMS. Contains an IP address and nameserver info so you can point domains to your hosted site.

 

The DNS settings are controlled wherever your nameservers are pointed.

 

The DNS settings allow us to use temporary domain pointing via A records. A records need the IP address of where the site is hosted to point.

12/14/2020

Reviewing URLs

 

Find a domain that you want to use for your site.

We can use name.com to see if it’s available.

 

TLD

A top-level domain is one of the domains at the highest level in the hierarchical Domain Name System of the Internet. The top-level domain names are installed in the root zone of the name space.

 

Examples of popular TLD’s:

 

TLD Common Uses
.com Most popular, usually used for corporations, but can be used for any type of entity.
.org Usually used by organizations (mainly nonprofits).
.net Used for networks especiatlly computer networks.
.edu Used for formal schools and universities.
.gov Limited to United States governmental entities and agencies as well as qualifying state, county and local municipal government agencies.

 

ICANN

The Internet Corporation for Assigned Names and Numbers (ICANN /ˈaɪkæn/ EYE-kan) is an American multistakeholder group and nonprofit organization responsible for coordinating the maintenance and procedures of several databases related to the namespaces and numerical spaces of the Internet, ensuring the network's stable and secure operation.

 

They make rules about domains to keep them safe. For example, they don’t let you transfer a domain until after a waiting period after buying it or transferring it.

 

12/10/2020

Not in Codecademy:

URL (Uniform Resource Locator)

address of a given unique file that is connected to the internet.

 

Basics: anatomy of a URL

Here are some examples of URLs:

https://developer.mozilla.org

https://developer.mozilla.org/en-US/docs/Learn/

https://developer.mozilla.org/en-US/search?q=URL

Any of those URLs can be typed into your browser's address bar to tell it to load the associated page (resource).

A URL is composed of different parts, some mandatory and others optional. Let's see the most important parts using the following URL:

http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument

http is the protocol. The first part of the URL indicates which protocol the browser must use. A protocol is a set method for exchanging or transferring data around a computer network. Usually for websites it is the HTTP protocol or its secured version, HTTPS. The Web requires one of these two, but browsers also know how to handle other protocols such as mailto: (to open a mail client) or ftp: to handle file transfer, so don't be surprised if you see such protocols.

 

You need to point your domain to your IP.

 

Nameservers- permanent

A record- temp

MX record- email

 

www.example.com is the domain name. It indicates which Web server is being requested. Alternatively, it is possible to directly use an IP address, but because it is less convenient, it is not often used on the Web.

:80 is the port. It indicates the technical "gate" used to access the resources on the web server. It is usually omitted if the web server uses the standard ports of the HTTP protocol (80 for HTTP and 443 for HTTPS) to grant access to its resources. Otherwise it is mandatory.

/path/to/myfile.html is the path to the resource on the Web server. In the early days of the Web, a path like this represented a physical file location on the Web server. Nowadays, it is mostly an abstraction handled by Web servers without any physical reality.

?key1=value1&key2=value2 are extra parameters provided to the Web server. Those parameters are a list of key/value pairs separated with the & symbol. The Web server can use those parameters to do extra stuff before returning the resource. Each Web server has its own rules regarding parameters, and the only reliable way to know if a specific Web server is handling parameters is by asking the Web server owner.

#SomewhereInTheDocument is an anchor to another part of the resource itself. An anchor represents a sort of "bookmark" inside the resource, giving the browser the directions to show the content located at that "bookmarked" spot. On an HTML document, for example, the browser will scroll to the point where the anchor is defined; on a video or audio document, the browser will try to go to the time the anchor represents. It is worth noting that the part after the #, also known as the fragment identifier, is never sent to the server with the request.

Note: There are some extra parts and some extra rules regarding URLs, but they are not relevant for regular users or Web developers. Don't worry about this, you don't need to know them to build and use fully functional URLs.

You might think of a URL like a regular postal mail address: the protocol represents the postal service you want to use, the domain name is the city or town, and the port is like the zip code; the path represents the building where your mail should be delivered; the parameters represent extra information such as the number of the apartment in the building; and, finally, the anchor represents the actual person to whom you've addressed your mail.

 

12/09/2020

*Text in red is on the quiz.*

Intro to HTML- Study Guide

HTML stands for HyperText Markup Language:

  • A markup language is a computer language that defines the structure and presentation of raw text.
  • In HTML, the computer can interpret raw text that is wrapped in HTML elements.
  • HyperText is text displayed on a computer or device that provides access to other text through links, also known as hyperlinks. You probably clicked on a couple of hyperlinks on your way to this Codecademy course.

Ex 2: Elements

HTML is composed of elements. These elements structure the webpage and define its content. Let’s take a look at how they’re written.

 

The diagram to the right displays an HTML paragraph element. As we can see, the paragraph element is made up of:

  • An opening tag (<p>)
  • The content (“Hello World!” text)
  • A closing tag (</p>)

A tag and the content between it is called an HTML element. There are many tags that we can use to organize and display text and other types of content, like images.

Let’s quickly review each part of the element pictured:

  • HTML element — a unit of content in an HTML document formed by HTML tags and the text it contains.
  • HTML Tag — the element name, surrounded by an opening (<) and closing (>) angle bracket.
  • Opening Tag — the first HTML tag used to start an HTML element. The tag type is surrounded by opening and closing angle brackets.
  • Content — The information (text or other elements) contained between the opening and closing tags of an HTML element.

Closing tag — the second HTML tag used to end an HTML element. Closing tags have a forward slash (/) inside of them, directly after the left angle bracket.

 

Ex 3: The Body

One of the key HTML elements we use to build a webpage is the body element. Only content inside the opening and closing body tags can be displayed to the screen. Here’s what opening and closing body tags look like:

<body>

 

</body>

Once the file has a body, many different types of content – including text, images, and buttons – can be added to the body.

<body>

<p>What's up, doc?</p>

</body>

Work:

  1. Add a body to your web page using the <body> element.
  2. Add the following code between your opening and closing body tags:

<p>"Life is very short and what we have to do must be done in the now." - Audre Lorde</p>

Ex 4: HTML Structure

HTML is organized as a collection of family tree (or hierarchy) relationships. As you saw in the last exercise, we placed <p> tags within <body> tags. When an element is contained inside another element, it is considered the child of that element. The child element is said to be nested inside of the parent element.

<body> <- Parent

<p>This paragraph is a child of the body</p> <- Child

</body>

In the example above, the <p> element is nested inside the <body> element. The <p> element is considered a child of the <body> element, and the <body> element is considered the parent.

Since there can be multiple levels of nesting, this analogy can be extended to grandchildren, great-grandchildren, and beyond. The relationship between elements and their ancestor and descendant elements is known as hierarchy.

Let’s consider a more complicated example that uses some new tags:

<body>

<div>

<h1>Sibling to p, but also grandchild of body</h1>

<p>Sibling to h1, but also grandchild of body</p>

</div>

</body>

In this example, the <body> element is the parent of the <div> element. Both the <h1> and <p> elements are children of the <div> element. Because the <h1> and <p> elements are at the same level, they are considered siblings and are both grandchildren of the <body> element.

Understanding HTML hierarchy is important because child elements can inherit behavior and styling from their parent element. You’ll learn more about webpage hierarchy when you start digging into CSS.

Instructions:

  1. Add the paragraph below as a child of the div element.

<p>This paragraph is a child of the div element and a grandchild of the body element</p>

 

 

Ex 5: Headings / Hierarchy

Headings in HTML are similar to headings in other types of media. For example, in newspapers, large headings are typically used to capture a reader’s attention. Other times, headings are used to describe content, like the title of a movie or an educational article.

HTML follows a similar pattern. In HTML, there are six different headings, or heading elements. Headings can be used for a variety of purposes, like titling sections, articles, or other forms of content.

The following is the list of heading elements available in HTML. They are ordered from largest to smallest in size.

  1. <h1> — used for main headings. All other smaller headings are used for subheadings.
  2. <h2>
  3. <h3>
  4. <h4>
  5. <h5>
  6. <h6>

 

The following example code uses a headline intended to capture a reader’s attention. It uses the largest heading available, the main heading element:

<h1>BREAKING NEWS</h1>         |           BREAKING NEWS

*** Not on Codecademy:

I don’t know why they don’t give you this from the get-go, but here is a list of all the HTML Tags you should know. If you have this list in front of you you can make a full (really basic design webpage). Walk through these with them.

 

 

Ex 6: Divs

One of the most popular elements in HTML is the <div> element. <div> is short for “division” or a container that divides the page's code (not visible on page) into sections. These sections are very useful for grouping elements in your HTML together. <div>s can contain any text or other HTML elements, such as links, images, or videos.

(Notice how my children of my div are indented)

<body>

  <div>

<h1>Why use divs?</h1>

<p>Great for grouping elements!</p>

  </div>

</body>

<div>s don’t inherently have a visual representation, but they are very useful when we want to apply custom to our HTML elements.

 

I would group these elements together to add a styling to all of them at once.

Instead of this:

<h1 id=”style”>Who Am I?</h1>

<p id=”style”>My name is Brady.</p>

I can do this:

<div id=”biography”> 

    <h1>Who Am I?</h1>

    <p>My name is Brady.</p>

</div>

Then in my CSS file, I will apply a certain style to the id “biography.”

#style {

    color: red;

}

Then in my CSS file, I will apply a certain style to the id “biography.”

Ex 7: Attributes

“biography” in my code is an attribute. Attributes are content added to the opening tag of an element and can be used in several different ways, from providing information to changing styling. There are different types of attributes; but they all look the same:

<div id=”biography”

The type of attribute is an id and the value is “biography”. It’s kind of like labeling different parts of my page. I separate the code of one part of my page and name the code something using an attribute. Here are the different types and their functions:

Class          Names an element or group of elements, usually for styling.

Be able to name at least one attribute.

Ex 8: Displaying Text

If you want to display text in HTML, you can use a paragraph or span:

 

Paragraphs (<p>) contain a block of plain text.

<span> used to separate small pieces of content that are on the same line as other content.

 

Take a look at each of these elements in action below:

 

<p><span class=”fancy-font”>Self-driving cars</span> are anticipated to replace up to 2 million jobs over the next two decades.</p>

 

In the example above, there are two different <div>. The second <div> contains a <p> with <span>Self-driving cars</span>. This <span> element separates “Self-driving cars” from the rest of the text in the paragraph.

 

It’s best to use a <span> element when you want to target a specific piece of content that is inline, or on the same line as other text. If you want to divide your content into blocks, it’s better to use a <div>.

 

Ex 9: Styling Text

You can also style text using HTML tags. The <em> tag emphasizes text, while the <strong> or <b> tag highlights important text.

 

Later, when you begin to style websites, you will decide how you want browsers to display content within <em> and <strong> tags. Browsers, however, have built-in style sheets that will generally style these tags in the following ways:

 

The <em> tag will generally render as italic emphasis.

The <strong> will generally render as bold emphasis.

 

In grammar class you should have learned when to use these in titles of articles, boats, magazines, ect…

Ex 10: Line Breaks

<br> Makes a space between a line of content on the page.

The spacing between code in an HTML file doesn’t affect the positioning of elements in the browser. If you are interested in modifying the spacing in the browser, you can use HTML’s line break element: <br>.

 

The line break element is unique because it is only composed of a starting tag. You can use it anywhere within your HTML code and a line break will be shown in the browser.

 

<p>The Nile River is the longest river <br> in the world, measuring over 6,850 <br> kilometers long (approximately 4,260 <br> miles).</p>

 

The code in the example above will result in an output that looks like the following:

 

The Nile River is the longest river

in the world, measuring over 6,850

kilometers long (approximately 4,260

miles).

 

-------------------------------------------------------------

Lists:

Ex 11: Unordered Lists

In addition to organizing text in paragraph form, you can also display content in an easy-to-read list.

In HTML, you can use an unordered list tag (<ul>) to create a list of items in no particular order. An unordered list outlines individual list items with a bullet point.

The <ul> element should not hold raw text and won’t automatically format raw text into an unordered list of items. Individual list items must be added to the unordered list using the <li> tag. The <li> or list item tag is used to describe an item in a list.

<ul>

<li>Limes</li>

<li>Tortillas</li>

<li>Chicken</li>

</ul>

In the example above, the list was created using the <ul> tag and all individual list items were added using <li> tags.

The output will look like this:

  • Limes
  • Tortillas
  • Chicken

Ex 12: Ordered Lists

Ordered lists (<ol>) are like unordered lists, except that each list item is numbered. They are useful when you need to list different steps in a process or rank items for first to last.

You can create the ordered list with the <ol> tag and then add individual list items to the list using <li> tags.

<ol>

<li>Preheat the oven to 350 degrees.</li>

<li>Mix whole wheat flour, baking soda, and salt.</li>

<li>Cream the butter, sugar in separate bowl.</li>

<li>Add eggs and vanilla extract to bowl.</li>

</ol>

The output will look like this:

  1. Preheat the oven to 350 degrees.
  2. Mix whole wheat flour, baking soda, and salt.
  3. Cream the butter, sugar in separate bowl.
  4. Add eggs and vanilla extract to bowl.

 

Ex 12.5: Links (not on Codecademy!) aka hyperlinks

<a> tag is used to make normal text clickable. When clicked it will go to another page on the internet.

 

<a href="https://www.w3schools.com">Visit W3Schools.com!</a>

 

target attribute

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

  • _self - Default. Opens the document in the same window/tab as it was clicked
  • _blank - Opens the document in a new window or tab
    • Opening links in new tabs
  • And more...

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

Ex 13: Images

The <img> tag allows you to add an image uploaded to the internet to a web page. Most elements require both opening and closing tags, but the <img> tag is a self-closing tag. Note that the end of the <img> tag has a forward slash /. Self-closing tags may include or omit the final slash — both will render properly.

<img src="https://www.w3schools.com/image-location.jpg" />

 

The <img> tag has a required attribute called src. The src attribute must be set to the image’s source, or the location of the image.

Ex 15: Videos

<video> element requires an opening and a closing tag.

I gave you the wrong code for this. This is the real code to make a video:

<video src="myVideo.mp4" width="320" height="240" controls>

Video not supported

</video>

In this example, the video source (src) is myVideo.mp4 The source can be a video file that is hosted alongside your webpage, or a URL that points to a video file hosted on another webpage.

After the src attribute, the width and height attributes are used to set the size of the video displayed in the browser. The controls attribute instructs the browser to include basic video controls: pause, play and skip.

The text, “Video not supported”, between the opening and closing video tags will only be displayed if the browser is unable to load the video.

12/08/2020

Ex 15: Videos

<video src="myVideo.mp4" width="320" height="240" controls>

Video not supported

</video>

In this example, the video source (src) is myVideo.mp4 The source can be a video file that is hosted alongside your webpage, or a URL that points to a video file hosted on another webpage.

After the src attribute, the width and height attributes are used to set the size of the video displayed in the browser. The controls attribute instructs the browser to include basic video controls: pause, play and skip.

The text, “Video not supported”, between the opening and closing video tags will only be displayed if the browser is unable to load the video.

 

MP4- most commonly supported and used. MPEG-4 Part 14 or MP4 is one of the earliest digital video file formats introduced in 2001. Most digital platforms and devices support MP4. An MP4 format can store audio files, video files, still images, and text. Additionally, MP4 provides high quality video while maintaining relatively small file sizes.

MOV- designed by Apple. Usually used for long form videos and feature length films

AVCHD- the most advanced with small file sizes and supporting 3D videos

GIF- low quality, no sound, but can be simpler than an mp4 with no controls. It automatically loops too. EZgif.com has a lot of great tools.

 

MARKETING TIME- Videos

KING OF KING OF CONTENT

Can be used in many channels: blogs, podcast, videos, graphics, live stream

live streams- Real time videos. Reach far.

 

Video editors:

Paid Adobe Premiere Pro.- the best! $20/mo. For students and teachers. Very complex.

Filmora- free, no watermark. Haven’t tried it yet.

Headliner- free, no watermark. Simpler editor. Magic tools where you can transcribe a video for a podcast or something.

 

Measuring Data

 

Don’t know why we havn’t talked about this yet??

 

Unit Value Size
kilobyte (KB) 10001 bytes 1,000 bytes
megabyte (MB) 10002 bytes 1,000,000 bytes
gigabyte (GB) 10003 bytes 1,000,000,000 bytes
terabyte (TB) 10004 bytes 1,000,000,000,000 bytes

 

**Know these!**

 

Homework