Scribd
Upload
75 views

5 Day Coding Challenge Description Seif

The document provides an overview of basic HTML elements grouped into sections on base structure elements, block elements, elements that require attributes, and introductory elements. Key elements discussed include <html>, <head>, <body>, <p>, <h1-6>, <ol>, <ul>, <li>, <em>, <strong>, <a> and their usage.

Uploaded by

Andre
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
75 views

5 Day Coding Challenge Description Seif

The document provides an overview of basic HTML elements grouped into sections on base structure elements, block elements, elements that require attributes, and introductory elements. Key elements discussed include <html>, <head>, <body>, <p>, <h1-6>, <ol>, <ul>, <li>, <em>, <strong>, <a> and their usage.

Uploaded by

Andre
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

5 day coding challenge

created by: Abdel Rahman Abu Seif


module topic name symbol description example
structures content on a web bowser. Can
be created in any text editor. Usually
shown by <_> *body of text* </_>.

introduction

elements

syntax
Elements nested within other elements <head> | </head>
elements <> key
(parent elements) are called child
elements. JS and CSS sees this nesting
Intro
family tree and allows for manipulation of
that content.
displayed vertically on the left of the page
block element
until styles by CSS.
browser reads and displays elements.
HTML <html> / </html> at the start and end of every web page <html> / </html>
where the main body of text in the web
Body <body> / </body> <body> / </body>
base structure elements

page lies.
contains tags that provide supporting
<head>
information as the page title (located in
Head <head> / </head> <title>_______</title>
the tab of the webpage not the actual
Elements

</head>
webpage).
crerates a paragraph with space before
paragraph <p> / </p> and after body of text. Defined as a block <p>HTML is easy to learn</p>
element.
Provides a title to a body of text. Has 6
heading elements nummbered from 1-6
headers <h1> / </h1> <h1>Why is HTML so Successful?</h1>
where h1= title, h2 section h3-6=sub
sections. Block element.
can be ordered or unordered depending on
block elements

if the order of the list matters. <ol> gives a <body> /


list with number indexes. <ul> gives a list <ol>
lists <ol> / <ul> / <li> with bullet point indexes. <li> is usually a <li>this is a list</li>
child element of the previous two </ol>
elements as it defines each row in the </body>
defined list.
emphasis
<em> / </em> emphaising text in italics <p>HTML is <em>easy</em> to learn</p>
(italics)
strong (bold) <strong> / </strong> emphaising text in bold <p>HTML is <strong>powerful</strong></p>
composed of an attribute name then
followed by a value. Attribute gives extra
intro

attribute = info about what the element does or gives <img src="https://www.google.com">
options for the element. CSS targets these
attributes to style elements.

contains address of HTML link that is


anchor/ interacted with. Link must be refranced
<a> / </a>
HTML

hyperlink with the attribute href in this form: <a


href= *link address*>*text*</a>
elements that require attribues

adds a link to the webpage that can be


referred to later in the script (usually under
header). Can refer to external library
extensions such as font awesome website. <link href="https://www.google.com" rel="stylesheet" type="text/css" /> |
link <link/>
This is then called upon within the text by <h2>ingredients <i class="fa fa-cutlery" aria-hidden="true"></i></h2>
attributes

copying and pasting the extension provided


as a child element to the targeted
element.

<div>
neutral identifies structural areas on a page or
<div>/<span> *body of text*
elements group elements together.
</div>

displays image on webpage. Src attribute is


used to link image to webpage from
image <img> website or own server. alt attribute gives a
discription of the image (best practice to
images

use) <img src="https://www.google.com"; alt="this is an image">


download image then upload to image
source <img src="_"> hosting site like "imgur" then refer to the
image url in the image tag
alternate text <img alt="_"> shows a description for visually impared
semantics allow the browser to
understand the context of what is being
created easily allowing for accurate SEO
intro

semantics
ID. There are elements in HTML 5 that do
that and suppliment what the puropse of a
body of text is.
provides introductory and navigatory
header <header> <header></header>
content. Contains one heading tag
semantics

independent piece of content (makes


article <article> sense on its own. Can be understood <article></article>
outside the context of the page.
elements

represents a location on a page that links


navigate to <nav> to other pages. Major navigation blocks <nav></nav>
only need a nav tag.
the content in a section doesn’t need to
section <section> make sense on its own. Ie: contact us, <section></section>
about, section in a newspaper article…
footer <footer> adds a footer section to the page <footer></footer>

defines colour, size and position of


elements. | Composed of a
selector{property:value;} (the attributes
intro

CSS {} inside the curly brackets are called body{color:red}


declarations). The selector defines what
basics

element the declaration will be applied to


and this rule will propogate to all pages. |

target multiple
element1,element2 {} separate elements using a comma h1,h2{color:orange}
targeting

elements
child element add a space after the parent element to
__ parent_element child_element{_:_}
targeting spacifically target a child element
<head>
style element controls the style of all <style>
refered to elements in the HTML body {font-size: 14px; font-family:Arial;}
document. This must be a child element if h1 {color: #ffd700; text-transform: uppercase;}

style definition
opening tag <style> the <head> element. import element p {color: darkslategray;}
allows the import of external style sheets em {font-size: 20px; color:rgb(0,128,0);} created by: Abdel Rahman Abu Seif
not declared on an HTML style page. strong {font-size: 24px; color:rgb(0,0,0);}
style Allows chaining of style pages. </style>
</head>
1) inline style applies to individual <p style="property:value;"> _____</p>
style attribute style=
elements by using a style attribute.
declarations

sets a specific style choice to the HTML


property:value color:red
line targetted.

#id_name() allows the application of the


styling to one type of element with that
tag, this is aplied as a child element to the
ID definition #id_name{declaration} <head> element. provides a style to a #id_name{color:red}
single type of element throughout the
page. Can be used on an external style
sheet
<p id="CallToAction"> | <style>#CallToAction{declaration}</style></p> |
<head> <style>
#heading {font-family: Arial; background-color: red;color: white;}
ID

#uppercase{text-transform:uppercase;}
this adds a tag to elements that CSS can </style>
detect. This adds a tag that CSS can use to </head>
ID attribute id="_"
apply the same styles to. | Id= is used to |
define the tag that the element will have. <body>
grouping
CSS

<div id='heading'>
<h1>Sporting History</h1>
<p id='uppercase'>Giants & Heroes</p>
</div>
<style>
allows the styling of elements with the
.sports-history{color:orange;}
class definition .class_name class name, this is used in the head
.computing-history{color:green;}
element or an external style sheet.
</style>
this allows for classification (tag) of
classes

multiple elements using the class attribute


(class=) this is then called upon in the
<head> with the .class_name element.
class attribute class="_" <h3 class='sports-history'> Track & Field</h3>
Values in the attribute don’t have to be
unique throughout the document. Classes
can provide a style template for all types of
elements

Responsive design is the process of building


responsive a website that will automatically adjust
body { font-size: 300%} ; {text-transform: uppercase}
design and adapt to the screen size of whatever
device the user is on.
intro

breakpoints sections that the browser is broken up into


relative changes the size of the webpage relative
% body { font-size: 300%}
measurments to the screen size in %

font size font-size: size of the font body { font-size: 300%}


responsive design

width width: width of the element on the screen


linking external
this links the external CSS style sheet to
CSS sheet to <link href="CSS_stylesheet.css" rel="stylesheet" type="text/css" />
the webpage
webpage
margin-top | margin-
elements

margin bottom | margin-right adds space to element above or below margin-top: 50px
| margin-left
padding-top | padding- adds space around the entirety of the
padding padding-top: 50px
bottom element
allign text-align aligns the text on a side text-align: left
allows for a set of styles that are only
applied to certain screen dimensions. | the
media query @media @media screen and (max-width: 768px) { body{text-align:center}}
example states styles that only occur at
screen sizes below 768px
Allows enhancement of webpage with
JavaScript

animation, visual effects and interactivity.


javaScript definition

| responsible for logical decision making of


the website.
intro

script element can be put in the header or


body like the style element and tells the
opening tag <script> browser that whats inside is javascript <script> </script>
coding. Script only used when in the HTML
file.
event listeners

onmouseover=
on mouse do a function when the mouse is hovered
elements

"functionName()" | <section onmouseover="ingredientsHover()"


over/out over the element | once away from
onmouseout= onmouseout="ingredientsNormal()">
attribute element do another function
"functionName()"
can create customised function to input
function function into an element | actions are inputted in
definition functionName() {_} curly brackets to tell the function what to
do.
JavaScript

start of function creation, the element


targeted must be located. This calls the
document
entire document as the first parent
element
.GetElementById("_")
locate the parent element by ID or class
locating target |
function creation

name, usually located after "document"


element .GetElementByClass(" <script>
when defining a function
functions

_") function ingredientsHover() {


tells the browser to look at the first child document.getElementById('ingredients').style.fontSize='300%'}
element of the element previously </script>
.firstElementChild.
mentioned allowing for a more detailed
targetting of the function

tells the browser that a style (CSS) element


will be applied then what attribute=value
declaration is chosen. This example shows
attribute
.style.attribute=value that when using JS = is always used for
assignment
declarations, this is because style is used
to specify that its CSS| done after locating
the child element

You might also like