-
HTML code describes the structure of a web page. In all documents , structure is very important in helping readers to understand the messages and help in navigation.
-
An HTML element comprises the opening tag and the closing tag and any content that lies between them of HTML code that describes the structure of a web page.
-
Attributes provide additional information to help elements describe the structure of the web page in more detail. Example: they can indicate the language for a paragraph.
-
Anything written between the body
<body> </body>elements will be shown inside the main browser window. The elements of the<head> </head>of the page will contain information about the page and not be shown on the main browser window. The<title> </title>element will usually be found within the<head>element. The<title>elements are either shown above the browser, above the URL, or on the tab for that page. -
In Google chrome Right-click on a blank part of the web page and select View page source from the pop-up menu that appears. Also you can type view-source: +URL
-
<h1> </h1>elements represent the main headings of the page.<b> </b>elements make words appear bold.<q> </q>elements are used for short quotes that sit within a paragraph.<blockquote> </blockquote>elements are used for longer quotes that take up an entire paragraph.<cite> </cite>elements can be used when making reference to a piece of work such as a book, film, or research paper. -
Words that do not contain any words between an opening and closing tag are empty elements. An empty element usually only has one tag and before the closing angled bracket there will often be a space and forward slash character.
-
Text elements that are not intended to affect the structure of a web page but do add extra informtaion are known as semantic markup.
-
HTML 5 introduced
<header>element representing the main header at the top of a page or article within the page, the<footer>element which represents the main footer at bottom of page or article within the page, and<nav>elements used to represent the major navigational blocks on the site.
https://codepen.io/foster55f/pen/BebyaR
-
The ordered list in HTML sets up a list using numbering (numbers, letters, roman numerals, and so on) and is created with the
<ol>element. The unordered list is created with the<ul>element while it uses bullets for a list (circles, squares, diamonds, and so on to make list). The definition list is created with the<d1>element and is used to create definitions of terms in lists. -
The basic structure of an element used to link to another website is an opening
<a>tag with the href attribute and closing</a>. Any text placed in between those 2 tags will be known as the link text. To reference the specific website in the code use the href (<a href="URL"> link text </a>) attribute inside the opening link tag. -
Use the target attribute on the opening tag to open the link in a new window and the value of the target attribute should be
_blank(<a href="URL" target="_blank">) -
To link to specific part of the same page you would first give id (id="top") attributes to an HTML element where you would like the link to direct the user. Those attribute values would start with a letter or underscore and no 2 id attributes should have the same value on a single page. To link to the specific id attribute you would use the
<a> </a>elements again but the value of the href starts with # (<a href="#top">)
-
CSS lets us create rules so that we can specify how the content of an element should appear on a web page. Gives ability to control design and specify background color, paragraph color, font, etc.
-
CSS stands for Cascading Style Sheet. Cascading refers to the fact that there can be more than one stylesheet that can apply to the HTML , and the stylesheet rules cascade down from the more general rules to the specified rule required.
-
A CSS rules contains two parts: a selector and a declaration.
-
The element can be used to tell the browser where to find the CSS file used to style the page. This is an empty element that does not require the closing tag. It lives within the element.
-
It's useful to use an external CSS style sheet when you are building a site with more than one page. This would allow all the pages to use the same rule instead of having to repeat them in each page with the internal CSS
-
Hex codes are six-digit codes that represent the amount of red, green, and blue in a color. They are preceded by a # sign.
-
The three parts of an HSL color property are Hue, Saturation, and Lightness.
-
The three main categories of fonts in the world of Typeface are Serif, Sans-Serif, and Monospace. Serif fonts have extra details on the ends of the main strokes of the letters, while Sans-Serif have straight ends to letters. In Monospace font every letter is the same width.
-
The three main units used to specify font-size are Pixels, Percentages, and EMS.
-
The type attribute will control what kind of input they will be creating in the form.
-
The
<select>element is used to create a drop down list box. -
Set the type attribute to
type="submit"to send a form to the server. -
To group similar form items together, you would use the
<fieldset>element.
-
CSS treats each HTML element as if it is in a box, each box has three available properties that can be adjusted to control appearance. The Border separates the edge of one box from another, while Margin sits outside the edge of the border giving you the ability to create a gap between the borders of two adjacent boxes. Padding is the space between the border of a box and any content contained within it.
-
1px: Top, 2px: Right, 5px: Bottom, 10px: Left.
-
Block level elements will always appear to start on a new line in the browser window.
<h1>, <p>, and <ul>are exaples of block level elements. Inline elements will sit within a block level element and always appear to continue on the same line. They flow in between surrounding text.<b>, <em>, and <img>are examples of inline elements. -
Fixed positioning's role is to position the element in relation to the browser window. Elements that contain fixed positioning do not affect the position of surrounding elements and do not move when user scrolls up or down. The z-index allows you to control which box appears on top.
-
Fixed Width layouts do not change as the user changes the size of their browser window, while Liquid Layouts will stretch or contract as the user increases or decreases the size of their browser window. Fixed Width Layouts measurements tend to be given in pixels, while Liquid Layouts use percentages.
-
The alt attribute is important because it provides a text description of the image which would describe the image if you cannot see it.
-
If an image element is followed by a block level element then the block level element will sit on a new line after the image. If an image element
<img>is inside of a block level element then all the text will flow around the image. -
jpgfile formats help distinguish a file image with many different colors in the picture, whilepngis more suited for an image with few colors or large areas of the same color.
-
When you consitently use similar size images across your site it allows you to use CSS to control the dimensions of the images instead of having to put them in HTML. You can specify a size through a name in CSS and then use these names as values for the class attribute in HTML. Match up the class names in HTML with selectors in CSS, and then use the CSS width and height properties to control the image dimensions.
-
An image sprite is a collection of images put into a single image. This allows the web browser to request for only one image vs many images, which can make the web page load faster.
-
To delcare a variable you need to create the variable and give it a name. To assign a value to the variable you would use the = sign which is called the assignment operator.
-
A Number data type handles numeric data. Number data types are used for calculators, determining the size of the screen, moving the position of an element on a page, or setting the amount of time an element should take to fade in. A String data type consists of letter and characters. String data types are enclosed with "" which can be single or double quotes but must match the closing type. Strings are used when working with text, adding new content to a page, and the can contain HTML markup. Boolean data types can have one or two values: true and false. Booleans are helpful when determining which part of a script should run.
-
The name must begin with a letter,dollar sign, or an underscore. It cannot start with a number. The name can contain letters, numbers, dollar sign, or an underscore. Do not use dash or a period in the name. You cannot use keywords or reserved words(ex reserved words: true, false, boolean ). All variables are case sensitive, so score and Score would be different variable names. Use a name that describes the kind of information that the variable stores. If your variable is made up of more than one word, use a capital letter for the first letter of every word after the first word.
-
Arrays are useful when you do not know how many items a list will contain because when you create the array you do not need to specify how many values it will hold. To access a value from an array after the array name you specify the index number for that value inside square brackets. You can change the valuie of an item in an array by selecting it and assigning it a new value as you would any other variable (use equal sign and new value for that item).
-
An expression evaluates results in a single value, while a statement is an individual instruction and perform action. Statements cannot be used where a value is expected.
-
Arithmetic operators can be used with numbers(ex: +,-, /, multiply, ++, --, %) to calculate. Multiplaction and division are performed before addition and subtraction. To change the order in which operations are performed, place the calculation you want done first inside parantheses.
var subtotal = (13+1) * 5; //Subtotal is 70 var shipping = 0.5 * (13+1); //Shipping is 7
var total + subtotal+shipping; // Total is 77
First couple of lines create two variables, one with subtotal cost and one with shipping cost so variables are named accordingly. The third line calaculates total by adding these two values. This shows how arithmetic operators can use variables to represent numbers.
There us just one string operator which is the + symbol and it is used to join the strings on either side of it. You may need to join two or more strings to create a single value.
var firstName = 'Ivy '; var lastName = 'Stone'; var fullName = firstName + lastName
The variable called fullName would hold the string 'Ivy Stone'
Assignment operators assign a value to a variable:
color = 'beige';
The value of color is now beige.
-
To be able to call the function and display Hello! you need to use the () after the function name. By not using the parantheses you do not show the user Hello!
-
Function parameters act like variables, and give the function specific information to perform its task Demonstrates how code can perform task without knowing exact details uprfont, as long as it has parameters. When a code like
function getArea(width, height) {return width * heright;the variables inside the curly braces of the function, those words act as variables. These names are the parameters. Often parameter and argument are used interchangeably, but when the function is called and the code specifies real numbers to perform the calculation (or variables that hold real numbers). these values are called arguments. -
The retrun keyword is used to return a value to the code that called the function.
-
Global variables are stored in memory for as long as the web page is loaded into the web browser. They will take up more memory than local variables, and it also increases the risk of naming conflicts. If multiple functions need to access the data across the application, a Global variable would be the better option.
-
Psychology How much work does the user have to do to get what they want? www.google.com Extremely simple and straightforward to the user. Browsing, trying to find answer, or searching for information with simple open space. Minimal work for the user. https://www.yahoo.com/ Extremely cluttered and does not gice a simple path for the user to get what they want from the site. It does not provide reliable and relevant results causing you to search more.
-
Usability Are you being clear and direct, or is this a little too clever? https://www.google.com/flights A very direct airline reservation booking page with simple straightforward instructions. www.spirit.com The amount of complicated work necessary for the user to simply reserve a flight is very time consuming and seems to be aimed to trick the user. The website is not clear on its intention since it is intended to be a place to reserve a flight.
-
Design Does it represent the brand? Does it all feel like the same site? www.apple.com A very clear and minimalist designed website that matches the feel and simplicity of its brand. Site is easily designed with their small amount of available products listed at top. Entire site has the clean white color matched with black throughout, then bright colors near the products. https://www.jcpenney.com/ Site is all over the place with no flow towards "what is the jcpenney brand". Extremely cluttered site with different colors throughout that dont seem to have a consistent theme.
-
Copywriting Does it reduce anxiety? https://huckberry.com/ Site has a very calming design with a simple appraoch to providing Men's clothes that are available and the most poupular scrolling in front at top. https://hoopshype.com/ For a simple website that is giving up to date basketball news in a twitter style fashion there is a lot more noise, color, and just things going on the site vs what website is aiming to give to the user.
-
Analysis How can you use this analysis to make improvements? www.youtube.com As user continuously go back and forth to their YouTube site, YouTube collects information on the user to better recommed videos. Eventually those videos are placed on the fron page for the user to better suit the user needs. https://www.cnbc.com/ As YouTube specifically targets the user with data, CNBC gives same information to all users. There is no specific data for articles recommended and no user generated data to better understand what each individual would prefer to see when visiting the site.