Reading Assignment 1

My Poem/Song. The verses have a consistent structure.

Best description: it is a first person narrative of getting on the right website but it turns out they searched for the wrong one. Its a parody of the first two parts of “A Life Less Ordinary” by Motion City Soundtrack.

“I didn’t think, I’d download it.

Thought the TCP was against me.

All those protocols and addresses alone.

Didn’t type a correct, DNS.

But the browser found an IP.

Are we getting all the component files now?…

Filling up on endless assets, from all those HTTP websites.

All these packets are turning to lots of code.

Building up on HTML from CSS to JS.

200 OK has a massive appeal to me.

The website was somewhere else!

I think I can type it all out.

But I’m gonna need some DNS to get there

need some DNS to get there.

I think I can type it all out

But I’m gonna need some DNS to get there

need some DNS to get there. onto it….”

How are HTML, CSS, and JS Parsed?

The browser proceeds to start with the HTML file first and searches for any links to styles and scripts (CSS and JS.)

From those links the HTML then requests the CSS and JS files and parses them.

The website generates an in memory DOM tree from the HTML, CSSOM structure for the CSS and compiles and invokes the JS finally.

How can you find images to add to a website?

You can make and design images for your self.

You can also google search for them but it is advised to use the smart tool search and filter!

It is posssible to get into copyright concerns if you download an image that is owned by someone else. Creative common licenses are important.

There are also websites such as Unsplash that have free images without the hassle of worrying about violating copyright!

Strings vs Numbers in JavaScript

Simple to create a string.

Its literally a phrase or evening nothing within quotes!

let text = “example”;

To create a number you just define a variable using the number.

let ex = 1;

What is a variable?

A variable is like a container for data.

You can define variables and save them for many instances further along in code.

They can serve many purposes!

They important because they can hold value and be part of more complex scripts!

Re-Introduction to HTML

What are HTML attributes?

All HTML elements can have attributes. Attributes provide addtional information about the HTML elements. Attributes are always specified in the start tags and they come in name/value pairs!

HTML Element Anatomy!

Image source: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics

Differences between < article > and < section > tags!

So a section tags typically refers and defines a section of an entire HTML document.

While an Article tag specificies an independent and specific piece of content within the document.

Typical Elements used in HTML

HTML - This typically defines the document and declares what the browser should look for.

Head - Contains information about what the page will be about.

Title - Contains information for the browser title and will also give information for what others see on search engines.

Body - The body element it will contain a majority of content such as text, media, and links.

Paragraph - A very commonly used element which allows text to be added to the document. Very frequently used!

Footer - Used typically at the bottom of a page and provides additional references and sources pertaining to the site.

Meta Data and Search Engine Optimization

Metadata is data that describes data.

You can add meta data via the < meta > tag!

It allows the user a much more uprfront and direct display of information and description of website.

The data is visible from search engines, such as author and website description!

Misc! Good For Future Reference!

How to design a website

The first step to designing a website is thinking of what to make the website about. What do you want from a website and how it will be practical. You also want to think about the audience you gather. These are all important factors to creating a website. Planning is just as important as the doing.

The most important question to answer when designing a website.

Is what do I want to accomplish? You don’t make a website for fun or because you want to? Maybe you are trying to reach others. Maybe you are trying to promote something or maybe you just want to share something. Regardless these are all foundations for catering to an audience which should take into account many design choices and potential actions.

Semantics

You should use an h1 element over the span element to set in stone the top level heading for the page. The h1 element has attributes that are generally used in an HTML document and users typically use them for heading purposes. Span can be defined to look like a heading but without any actual functionality of an h1 element which makes it the less preferred choice.

Benefits of using Semantics?

• Search engines will utilize listings as keywords and will help with search engine ranking!

• They can be used to help those with bad eye sight to navigate the webpage.

• They can be easier to find certain segments in endless lines of code!

• They tell the developer what data needs to be filled in and worked on.

JavaScript Basics

What requires Javascript in the Browser?

In order to react to user actions, such as mouse clicks and movements. Javascript is required to start and display the changes!

Javascript is also responsible for setting up user interactions and pop ups when you visit pages.

How can you apply JavaScript to HTML?

There are three ways to apply Javascript

Internally, meaning that the code is internal to the HTML script set in by script elements.

Externally. This is done by referencing a JavaScript source and then listing the source file between script tags.

Inline this is when you include the actual JS script with the HTML code however it is not efficent and can disorder your code.

Back to Home