Html Flashcards
What are HTML elements?
Pieces of contents wrapped in opening and closing tag. Ex. <p> </p>
What are opening tags? Purpose?
Comprise of a keyword enclosed in angle brackets <>. They tell the browser this is the start of an HTML element. Ex. <p>
What are closing tags? Purpose?
Almost the same as opening tags but they have a forward slash before the keyword. That tell the browser where and element ends. Ex. </p>
What is the purpose of elements?
Containers for contents.
The element tells the browser what the info is to determine how it should interpret and format the content.
Purpose of tags?
The tags tell the browser the content of the element.
Define self closing tags (empty elements)
They don’t wrap around any elements. Ex. <br></br> or <img></img>
What is the purpose of the (.html) extension?
To let the computer know we want to create an HTML file
Purpose of naming an html file (index)? (❗️)
The html file named index is where web server will look for by default as the homepage of the website
What is the Doctype declaration?
<!DOCTYPE html>
What is the purpose of Doctype?
It is to tell the browser what version of HTML it should use to render the page.
What is the <html> element? (❗️)
This is known as the root element of the page - this means every other element will be a descendant of it.
What is the function of the lang attribute? (❗️)
lang=en
Specifies the language of the text content in that element
Put inside the html element
What is the purpose of the lang attribute?
Primarily used for improving accessibility of the web page. For assistive tech like the screen reader to adapt according to the language.
What is the function of the head element? (❗️)
It’s where the important meta-info about the webpage, and stuff it requires to render properly are stored.
What to not use in the head element?
Any element that displays content on the webpage.
What is the charset encoding? (❗️)
<meta charset=“UTF-8”>
What is the function and purpose of the charset encoding?
It ensures that the webpage will display special symbols and characters from different languages correctly in the browser.
What is the function and purpose <title> element? (❗️)</title>
Used to give webpages a human-readable title which is displayed in our webpages browser.
What is the function and purpose of the <body> element?
This is where all the content that will be displayed to users will go. (The text, images, lists, links etc.)
How to view files in browser?
google-chrome file.extension
What is the boilerplate?
The backbone of ever html page.
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<title> </title>
</head>
<body>
<h1> </h1>
</body>
</html>
What’s the paragraph element?
<p> </p>
Function of the paragraph element?
Adds a newline after each of our paragraphs.
Explain the 6 different levels of headings.
From <h1> the biggest to <h6> the tiniest.
Purpose of <h1> element?
Use for the heading of the overall page.
What is the <strong> element function?</strong>
Makes the text bold. It also semantically marks text as important.
What is the <em> element function?</em>
Makes the text italic. Semantically places emphasis on the text.
What is nesting elements?
We indent any elements that are within other elements.
What happens when you nest elements?
U create a parent and child relationship
When nesting element siblings means?
Elements nested on the same level
What are the purpose and functions of html comments?
Comments that are not visible in browser and that allows u to comment on your code to get some context on unclear things u wrote.
What is an HTML comment? (❗️)
<!— —>
What is the purpose of unordered list?
List of items where the order doesn’t matter.
How to create an unordered list? And items in them?
Use the <ul> element
Use the <li> element to create each item.
<li> is the child of <ul>
</ul></li>
Purpose of ordered list?
If you want to create a list of items where the order does matter.
How to create ordered list? And items in it?
Use the <ol> element.
Use the <li> element to create each list item.
What is used to create links in html?
The anchor element
What is the anchor element?
Wrapping the text or another HTML element we want to be a link with an <a> tag.</a>
What does an anchor tag need to function?
An href attribute
What does an HTML attribute always look like?
Always in the opening tag
Made of a name and a value usually
Not all attribute require a value.
What is the function of an HTML attribute?
Gives additional info to an HTML element.
What is the value of a href attribute?
The destinations we want out link to go to.
What are absolute links?
Links to pages on other websites on the internet
What does a typical absolute link look like?
protocol://domain/path
What are relative links?
Links to other page within our website
What does a typical relative link look like and why?
It assumes the domain name will be the same as the page the link was created on hence only a file path
What does ./ do?
Specifies to your code that it should start looking for the file/directory relative to the current directory.
How to display an image in HTML?
Use the <img></img> element. Which is self closing
How does the self closing <img></img> element embeds images? (❗️)
It uses a src attribute that tells the browser where the image file is located.
What is the purpose of the alt attribute in the <img></img> element? Purpose?
Used to describe an image.
If the image can’t load.
Used for screen readers too
What are four main image formats?
Jpg, PNG, SVG, GIF
Website File naming guide
No uppercase
No numbers
No Space
What is a commit?
A snapshot of your code at the moment the commit was made.
What does a commit do?
Saves a version of your code up to that point.
When to make a commit?
Meaningful changes.
Fix a typo, bug, and working function etc.
What is the first rule of a great Git commit message?
- Separate subject from body with a blank line
What is the second rule of a great Git commit message?
Limit the subject line to 50 characters
What is the third rule of a great Git commit message?
Capitalize the subject line
What is the fourth rule of a great Git commit message?
Do not end the subject line with a period
What is the fifth rule of a great Git commit message?
Use the imperative mood in the subject line
What is the sixth rule of a great Git commit message?
Wrap the body in 72 characters
What is the seventh rule of a great Git commit message?
Use the body to explain what and why vs how
How to commit a single line of change(subject) in the command line?
[git commit -m “(change)”]
Where to write commit messages with a body?
In a text editor
Purpose of [git log —oneline]
Prints out the subject line
Function of git shortlog?
Group commits by user, showing the subject line to be concise
Imperative meaning
Spoken or written as if giving a command or action
How to write imperative subject lines?
Use: if applied, this commit will…
What is a <div> element?
Simply an empty container.
