Nucamp Web Fundamentals: Week 1
quizq3: -you would surround areas of text with this element -use the src attribute with this element -content inside this element is shown inside the main browser window. -this element is not semantic -defines the document type -this element contains information about the page such as its title
-p -img -body -div -!DOCTYPE -head
quizq9: -parts of element inside angle brackets -related to meaning -html -attribute -an element that has only one tag -boolean
-tag -semantic -the root element -additional information about an element set inside the start tag -void -attributes that are not set with an explicit value; implicitly true by the attribute name's presence
notepad on microsoft computer, input some code and save as .txt vs .html
.html shows correctly .txt file is the literal text in browser this is because the file extension is what tells the browsers to interpret info in a different way
<h1> to <h6>
6 levels, NOT used to resize text. they are used to give MEANING to the structure, not styling this is for accessibility
HTML Skeleton
<!DOCTYPE html> <head> <title> <body>
how to link to phone number, so that it opens a phone call
<a href="1+123-555-5555>Call</a>
how to link to email, so that it opens an email
<a href="Mailto:[email protected]">
can nest what inside of an <li>
<div> if you'd like
cannot nest inside each other
<p> tags
controls in video tag
BOOLEAN use with embedded video so you can start, play, and see all the video control buttons
loop in video tag
BOOLEAN, video loops
CSS
Cascading Style Sheets
autoplay in video tag
DO NOT USE - most users don't want a video to play as soon as you click
HTML
Hypertext Markup Language first language of the world wide web
<em> </em>
INLINE gives emphasis, browsers display in italics. use if you want screenreader to give extra vocal emphasis to the words
<strong> </strong>
INLINE gives extra importance, for example a warning message, displays bold in browser
HTML5
It is the fifth and current version of the HTML standard
JS
Javascript - only programming language we're learning. able to make computations and transform data according to logical instructions. most powerful and complex of the three we're learning
smpt
Simple Mail Transfer Protocol
boolean
T/F, is implied true if it's in the start tag i.e. <p id="welcome" hidden>
the section element typically has
a header element inside of it, but it's not required
elements
all content is contained in an element i.e. <p> content </p>
quizq6: fill in the blank <p ____________ = "_____________"> content </p>
attribute name attribute value
global attributes are
attributes you can use with any element
if you specify width and not height in HTML, the image will
autosize with original ratio
quizq2: which of the below are examples of RELATIVE paths? a. "https://ww.nucamp.co/../logo.png" b. "logo.png" c. "../images/logo.png" d. "images/color/logo.png" e. "file:///C:/images/logo.png"
b, c, and d are all relative
when you code and there's a problem, you can isolate it by
commenting out the code, DON'T DELETE IT
front end
css, html, js
Ctrl + X
cut
!DOCTYPE is a
declaration that tells the browser we're using HTML 5, otherwise it will be legacy HTML
highlight code + Shift + Tab
decrease indent
alt attribute
descriptive text for screenreaders used with the <img> tag this is descriptive text for screenreaders, in case the image doesn't load, and it helps search engines
web design
design is about the graphic design, like the aesthetic concerns (fonts, colors, layout)
use png for
digitally created graphics (logos)
<div> </div>
div BLOCK container (meaning it starts on a new line and holds content horizontally in a block) generic container, can hold text, images, video, etc., even other divs it's non-semantic, should be used as the last option when no other element fits
quizq5: every element needs an end tag that contains a forward slash. for instance, a <p> start tag would need an end </p> tag, and the <img> tag also needs to be paired with an </img> tag. (T/F)
false it's a void element
quizq4: the world wide web is another name for the internet. (T/F)
false. The World Wide Web is a part of the Internet, but the Internet includes many other communication protocols that are not a part of the World Wide Web.
quizq8: to anchor to another element on the same page, provide the element with a name attribute and set the href of the anchor element to that name (T/F)
false. you need to use id element and set the href to that id, prepended by a #
ftp
file transfer protocol
sometimes browser will automatically
fix small errors i.e. if you close an h1 tag with an h2
continued education in nucamp
front end bootcamp - bootstrap, react, react native (mobile) full stack bootcamp - ^ same, but add node.js, express, mongodb back end technologies
<title> </title>
helps search engines figure out what your page is all about - it's used for the search results page. gives the browser tab the text at the top
<head> </head>
holds metadata (data about data), like the cover of a book talks about the inside of the book. Is not displayed on webpage, instead is used by the browser to get info about HOW to display the webpage
<body> </body>
holds webpage content
Structure of HTML Document
html > head > meta > title html > body > h1
href
hyperlink reference
http
hyptertext transmission protocol - rule for how web servers and browsers communicate
can add boolean to list
i.e. <ol reversed> to reverse the list, etc.
20 minute / 10 minute rule
if you can't solve a problem in this amount of time on your own / during workshop, ASK
<!--comment-->
ignored by browser, leave notes for future self or others, comment code out to disable temporarily
<img> </img>
image, REQUIRES src attribute
highlight code + Tab
increase indent
<img> is an ______ element, that will always be _____
inline / px - don't need to specify
<span> is an _______ element
inline, non-semantic
<i> and <b>
italics and bold, from early days of html before css was created. not recommended to use this anymore
back end
js, php, ruby, python server side that responds to requests from the client don't have to use the same programming language on both ends
don't use pixels in html to resize photo, instead use
just the number
<meta charset="utf-8">
lets browser know how to display characters, first element inside the head element
relative path
like saying left and right when giving instructions, not as exact, when locating a file
absolute path
like saying north and south, more exact, doesn't change depending on context -includes protocol https
<video src="someVideo.mp4" controls> your browser does not support html5video, here's a link instead</video>
mp4 / ogg / webm are types of video files - the text inbetween the start and end tag is fallback content - can specify width and height - can choose to
<audio>
needs the controls attribute
void
no closing tag i.e. <meta charset="UTF-8"> and NO </meta> at the end or slash can have attributes
quizq7: fill in the blank for an ordered list ___ ___ apples ____ ___
ol li /li /ol
First HTML webpage is still
online - http://info.cern.ch/hypertext/WWW/TheProject.html
attribute is always in an _____tag
open, an invalid one will break your code. can either be a key value pair or boolean
target="_blank"
opens link in a new window
<ol> </ol>
ordered list
<p> </p>
paragraph BLOCK adds margin around text
use jpg for
photos
live server extension in vs code
refreshes the browser
https://simon.html5.org/html-elements
resource that pulls straight from mdn, shows all the valid attributes you can use with an element
libraries and frameworks
reusable code in open source libraries so we're not reinventing the wheel with the same code very often companies use them
<html> </html>
root element, wraps around everything else
<section> </section>
section BLOCK, similar to div but it is semantic, contents have a related subject matter i.e. a movie theater's site section on new releases
https is the
secure version of http
Ctrl + A
select all
F12
shortcut that opens inspect on the browser
whitehouse.gov example
showed that comments can be hidden in code as easter eggs for coders
right click on chrome, view source code
shows the original code
right click on chrome, inspect
shows what browser fixed
more than one language in an html document?
specify the language for the specific sections as needed, or specify globally and then for a specific section
../
tells browser to go down one directory level (look in folder above the current folder)
lang
tells browser which alphabet to search for, i.e. to look for spanish
hypertext
text that contains hyperlinks - concept predates http/html
the world wide web is not
the internet. the internet existed in 1960 - web is just part of the internet
attributes
the start tags can hold extra info i.e. <p id="welcome">
who invented the world wide web
tim berners-lee in 1990 through research org in europe called CERN
quizq10: it is valid to set only the width or height attribute for an <img> or <video> element. you do not need to set both; if you only set one, the browser will auto resize the other dimension to match the width/height ratio of the original image or video
true
quizq1: <div> is a block level element (T/F)?
true
<meta name="description">
under the title in the search result
full stack
understands front and back end
UTF stands for
universal character set + transformation format
<ul> </ul>
unordered list
how to ask questions in slack
use course channel #1htmlcssjavascript and @professor, attach the actual file that has code in it (don't screenshot). screenshot browser if needed to show what's happening
<li> </li>
used inside lists to define each list item
can make the bullet points go away on the list in HTML
using CSS
<meta name="description content="example of meta description">
value - it's a summary of the content of the page that appears in a search engine (like the text underneath the title) does not affect google algorithms but can affect click through rate
<br>
void element, line break
editor
vscode others - atom, sublime
UTF-8
will always be utf-8 for humans, specifies which unicode set you see
web developer
will often translate the web designer's design into code