Basic Web Design
local version
The version of your website that resides on your computer also called the offline version
<p> tag
paragraph tag;comes with predetermined formatting to organize your blocks of text;Think of <p> tags as a liquid—they'll reshape themselves to fill their container. Header tags share this behavior as well, but it's not as noticeable with them since they don't span over multiple lines as often as paragraphs do.
Parsed
the browser seeks out the HTML in the text and carries out the predetermined instructions the tags provide. When the results are displayed, all of the tags are removed from view, as they've served their purpose of telling the browser what to do. Any text characters included in a document that are not tags will appear, organized and formatted as dictated by the HTML.
Hyperlinks
the images or text that you click to go to another website
CSS
took over the task of styling elements of a webpage
HTML5's DOCTYPE
<!DOCTYPE html> HTML5's DOCTYPE is sometimes referred to as a "skinny doctype", because of its bare-bones code. It is much easier to memorize than previous DOCTYPEs, and efficiently tells the browser what version of HTML is being used.
Which tag is most appropriate for the underlined text below? The Black Friday shoppers piled into the store en masse.
<i> Foreign language phrases are best formatted in italics without emphasis.
Which example shows proper formatting of a postal address in HTML?
<p>Timothy Jones<br>107 Main St.<br>Exampletown, CA 12345</p>
Which tag is needed to create this quotation?To quote Benjamin Franklin, "A penny saved is a penny earned."
<q>; Inline quotations are designated by the q tag.
<head> tag
Acting like the brain of your document, it stores the title of your page, what your page is about, what files are associated with it, and how search engines should treat it. is also the space where you reference additional styling and scripting information, as well as call external CSS and JavaScript files to be used with the page. This feature will be utilized more when your website grows more complex and robust.
What does an HTML attribute do?
An HTML attribute modifies an HTML element.
What is the difference between HTML tags and HTML elements?
An HTML tag is the code written to be parsed by the browser (what goes in), and an HTML element is the result that is displayed after the parsing (what comes out).
Properties
CSS functions by using predefined items;These include options such as changing the size of a font, adding a margin of space around an image, and changing the colors of your webpage.; able to change properties of an individual HTML element, but the real advantage is its ability to change the properties of an entire category of elements
What does a CSS property do?
CSS properties determine how an element will be styled.
Setting language in HTML
English<html lang="en"> Spanish<html lang="es"> French<html lang="fr"> All assignable languages use a country code—usually two letters. A list of country codes can be found on the web with a search for "html lang codes" or "html country codes".
FTP
File Transfer Protocol, is the language that allows computers on the same network to send files between each other
<footer> tag
However, if content in a <blockquote> is an excerpt from another source, its source should be noted. A handy way to do this as of HTML5—though not required—is the <footer> tag. The <footer> tag serves as the end, or foot, of a page or section, so it's a perfect place to credit a quotation.
What are hyperlinks?
Hyperlinks are items clicked on to move from one webpage to another.
HTML
Hypertext Markup Language; gives website its structure
<blockquote> tag
If you want your quotation to stand on its own;doesn't add quotation marks, but rather indents the content to block it off as quoted material. If your <blockquote> is just a pull quotation from your own material, citation isn't necessary.
syntax
In the cases of both spoken and code languages, syntax refers to a set of rules that a language follows. So with HTML, its syntax consists of key words and commands that are formatted in a certain way so that the browser understands.
Which of the following is a default behavior of a paragraph element?
It will dynamically redistribute text to fit the width of the page or its container. Text content will flow to fill up the width of its container.
quirks mode
One of the most important reasons for including a DOCTYPE is to avoid quirks mode. This was a failsafe added to browsers back before there were standardized rules for web languages. It kicks in to try and fix a webpage that has missing information or faulty syntax. Each browser has its own set of rules for quirks mode. This makes it highly unpredictable when designing a website, so it's best to avoid it. Include a DOCTYPE declaration and use proper syntax, and your site should stay out of quirks mode, and remain stable.
downloading
Retrieving files from that other server and putting them on your computer
<title> tag
The most important, and required, information to include in the <head> tag is your document's title. The title is established via the <title> tag. Your page title will show up in multiple places, including browser tabs, bookmark listings, and in search results. <title>Gardening and Plant Care</title>
HTML Attribute
The purpose of an attribute is to modify the HTML element it accompanies. If, for example, a designer wanted to make some font on the page larger, they would increase the value of a size attribute. Or if the designer needed to change the color of a table's background, they would edit an attribute called bgcolor.
Which of the following is NOT a semantic reason for using header tags?
They make text larger and bold. Making text larger and bold is a matter of styling, and HTML tags should not be used exclusively for styling purposes.
<meta> tag
When it comes to people finding your website Through different attributes, it can inform people, and search engines, what to expect from your website. A few of the most useful include: keywords - terms that people may type into a search engine to find your website description - a short entry that describes what your webpage is about—this is what appears under the title of your page in search results robots - can be used to instruct search engines whether or not they should be including your page in search results ie:<meta name="keywords" content="plants, gardening, soil, produce"><meta name="description" content="Welcome to my website on gardening and plant care. Learn all about what you can grow in your very own backyard!"><meta name="robots" content="index, follow">
<cite> tag
When referencing the title of an established work, such as a book, poem, song or movie, you may already know that you would italicize it. So, in web design, it would technically be acceptable to use the <i> tag around a title. However, the <cite> tag is the more appropriate tag for this purpose. The <cite> tag can also be used to identify the source of a quotation, whether that be a person's name or internet username, or even a website's URL.
uploading
When you send files from your computer to another server
JavaScript
a scripting language frequently used in combination with HTML and CSS. It can make changes to the website in response to events or user-submitted information, such as closing a pop-up window after the user clicks an "X" button. It can also calculate and process data to return to the user, including performing arithmetic and replacing the text in a paragraph.
header tags
also known as heading tags or head tags, are the main tools in building your content's hierarchy. There are six total to work with, and they are represented by the tags <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. They are prominently used to contain titles or headlines, or similar important content that should be differentiated from the rest of the page's text in a pronounced fashion. <h1> largest and boldest; <h6> smallest; Header tags should be reserved for holding different levels of important information. This helps your readers by organizing your content logically.; needs closing tag
Deprecated
an outdated feature may no longer be supported, and therefore, it will no longer function as intended.
CSS (Cascading Style Sheets)
another markup language, except its purpose is presentation, allowing for a separation from HTML's focus on the content of a website.since it focuses on styling, CSS includes more options for formatting webpage elements than the deprecated use of HTML styling attributes
<strong>
bold;The <strong> tag is best when an important word or phrase is being used, especially ones used as a caution. Words with the <strong> tag would be spoken a bit louder to make sure they were noticed.
<b> tag
handles information that should be called out visually, but wouldn't be read with any more volume or force. This can include a person's name in an article, product names, and vocabulary words.
<body> tag
holds all of the displayed content for your webpage. how to add, arrange and stylize the elements that together will form your website. This section must appear as the second element inside the <html> section (<head> having been the first). It can also be referenced in CSS to set various global style rules to your entire page. Other than that, there's not much else to customize when adding this section unless you are incorporating JavaScript
<hr> tag
horizontal rule;goes in between paragraphs; This places a line, or horizontal rule, across the width of the page. It should be used when there is a shift in topic that requires an obvious separation. This is appropriate with situations like a new chapter in a story or splitting up multiple article introductions.; doesn't require closing tag
<i> tag
is for when text only needs to be in italics for typographical formatting purposes, but not for emphasis. This text just needs to stand apart as it's something different than most of the text around it. This includes things like stage directions in a play script, or a word or phrase from another language. With this italics treatment, you wouldn't stretch out the phrase when speaking.
Most useful feature of CSS?
is it vastly improves efficiency and flexibility when formatting a document.
<em>
italics; Use the <em> tag when your text should be read with an emphasis, especially in comparing one thing to another. Text with the <em> tag would be stretched out when spoken.
Elements
items that result when the HTML has been parsed;help establish a website's readability and visual hierarchy. And in the case of hyperlinks, an element provides functionality. Different types of websites use a different balance of elements.
opening tag
key word between two angle brackets that designates where element starts; ie:<p>
<br> tag
line breaker; how to command the browser to move text to the next line without starting a new paragraph; The main caution with <br> tags is not to use two or more of them in a row to add more spacing between lines of text. This should be handled by starting a new paragraph or with CSS styling.; doesn't require closing tag
<q> tag
quote; If you are using a quotation inline with other text, you use the <q> tag.;default behavior is to place quotation marks around the text content. Sure, you can manually add quotation marks, but this is another situation where its use is focused on semantics. Using the <q> tag differentiates a quotation from other text that may have quotation marks for other reasons.
HyperText
refers to the ability to navigate between webpages using hyperlinks.
closing tag
repeating the same tag, but with forward slash inserted by key word; ie: <p> Good Morning!</p>
HTML5
simplified things. HTML5 only needs one DOCTYPE for any situation, and its DOCTYPE code is much shorter than HTML4's. This is a prime example of an HTML version improvement.
CSS3
some dynamic content has been incorporated for use without the need for JavaScript. This includes altering the coloring, size, and opacity of elements based on timing or moving your mouse cursor over the element
Void elements
tags that do not need a closing tag; ie: image, table, video
DOCTYPE declaration
tells the browser what version of HTML to expect
Markup Language
text that can be interpreted by a browser to determine a webpage's format, style and structure through the use of markup tags. to separate themselves from normal text, tags require the use of angle brackets (< and >).
live
when you move your website files to a domain's server, your website is now online and accessible by other web surfers
FTP client
which is a program created to handle FTP-related tasks There are many free FTP clients out there. In fact, your browser itself can be used to access an FTP directory. Though with this method, you will not be able to move or upload files, most likely—only navigate and download. If you type in your domain name, preceded by "ftp://" instead of "http://" , you"ll get a prompt requesting your login information, and you can access your files and directories right in the browser. When you register with a web host (the web space that will hold your files online), you will choose a user name and password. You will need to provide this information, often along with your domain name, to access an FTP service.
