Shared Flashcard Set

Details

About HTML
Everything about the language
140
Computer Science
Not Applicable
08/03/2019

Additional Computer Science Flashcards

 


 

Cards

Term
HTML is the skeleton of
Definition
all web pages
Term
So what exactly is HTML?
Definition
provides structure to the content appearing on a website, such as images, text, or videos.
Term
HTML stands for
Definition
HyperText Markup Language:
Term
A markup language is
Definition
a computer language that defines the structure and presentation of raw text.
Term
In HTML, the computer can _______
Definition
that is wrapped in HTML elements.
Term
HyperText is
Definition
text displayed on a computer or device that provides access to other text through links,
Term
HyperText is also known as
Definition
hyperlinks
Term
HTML is composed of
Definition
elements
Term
Elements
Definition
These elements structure the webpage and define its content. Let’s take a look at how they’re written.
Term
HTML element is
Definition
a unit of content in an HTML document formed by HTML tags and the text or media it contains.
Term
HTML Tag
Definition
the element name, surrounded by an opening (<) and closing (>) angle bracket.
Term
Opening Tag
Definition
the first HTML tag used to start an HTML element. The tag type is surrounded by opening and closing angle brackets.
Term
Content
Definition
The information (text or other elements) contained between the opening and closing tags of an HTML element.
Term
Closing tag
Definition
the second HTML tag used to end an HTML element. Closing tags have a forward slash (/) inside of them, directly after the left angle bracket.
Term
When an element is contained inside another element, it is considered the
Definition
child of that element.
Term
The child element is said to be
Definition
nested inside of the parent element.
Term
The relationship between elements and their ancestor and descendent elements is known as
Definition
hierarchy
Term
It’s best to use a ___ element when you want to target a specific piece of content that is inline, or on the same line as other text.
Definition
Term
If you want to divide your content into blocks, it’s better to use a ____
Definition
Term
Paragraphs ____ contain a block of plain text
Definition

Term
The ____ tag emphasizes text.(italic)
Definition
Term
The ____ while the tag highlights important text.(bold)
Definition
Term
If you are interested in modifying the spacing in the browser, you can use HTML’s line break element:

The line break element is unique because it is only composed of a starting tag
Definition


Term
____to create a list of items in no particular order. An unordered list outlines individual list items with a bullet point.
Definition
Term
The ____ or list item tag is used to describe an item in a list.
Definition
  • Term
    Ordered lists____ are like unordered lists, except that each list item is numbered. They are useful when you need to list different steps in a process or rank items for first to last.
    Definition
    Term
    The ____ tag allows you to add an image to a web page. Most elements require both opening and closing tags, but the tag is a self-closing tag.
    Definition
    < img/> [image]
    Term
    The ____ attribute, which means alternative text, brings meaning to the images on our sites. The alt attribute can be added to the image tag just like the src attribute. The value of alt should be a description of the image.
    Definition
    alt

    If an image fails to load on a web page, a user can mouse over the area originally intended for the image and read a brief description of the image. This is made possible by the description you provide in the alt attribute.
    Visually impaired users often browse the web with the aid of screen reading software. When you include the alt attribute, the screen reading software can read the image’s description out loud to the visually impaired user.
    The alt attribute also plays a role in Search Engine Optimization (SEO), because search engines cannot “see” the images on websites as they crawl the internet. Having descriptive alt attributes can improve the ranking of your site.
    Term
    Unlike the tag however, the ______ element requires an opening and a closing tag.
    Definition
    Term
    To create HTML structure and content, we must add opening and closing ______ tags after declaring _________
    Definition
    < html >
    Term
    Now, let’s also give the browser some information about the page itself. We can do this by adding a _____ element.
    Definition
    Term
    A browser’s tab displays the title specified in the ____ tag. The ____ tag is always inside of the ____.
    Definition
    < title > < title > < head >
    Term
    You can add links to a web page by adding an anchor element ___ and including the text of the link in between the opening and closing tags.
    Definition
    Term
    href
    Definition
    This attribute stands for hyperlink reference and is used to link to a path, or the address to where a file is located (whether it is on your computer or another location).
    Term
    The ____ attribute specifies how a link should open.
    Definition
    Term
    For a link to open in a new window, the target attribute requires a value of____
    Definition
    _blank
    Term
    An attribute, when used in modern browsers, will open new websites in a new tab.
    Definition
    The target="_blank"
    Term
    When making multi-page static websites, web developers often store HTML files in the
    Definition
    root directory, or a main folder where all the files for the project are stored.
    Term
    Contact
    Definition
    In this example, the tag is used with a relative path to link from the current HTML file to the contact.html file in the same folder. On the web page, Contact will appear as a link.
    Term
    A relative path is
    Definition
    a filename that shows the path to a local file
    Term
    local file
    Definition
    (a file on the same website, such as ./index.html) versus an absolute path (a full URL, like https://www.codecademy.com/learn/learn-html which is stored in a different folder).
    Term
    The ./ in ./index.html tells the browser to
    Definition
    look for the file in the current folder.
    Term
    HTML allows you to turn nearly any element into a link by wrapping that element with an anchor element. With this technique, it’s possible to turn images into links by simply wrapping the element with an element.
    Definition
    < img src="#" alt="A red prickly pear fruit"/>
    Term
    In order to link to a target on the same page, we must give the target an id, like this:
    Definition

    This is the top of the page!

    This is the bottom!

    Term
    #
    Definition
    In a non-interactive shell, or an interactive shell in which the interactive_comments option to the shopt
    builtin is enabled (see SHELL BUILTIN COMMANDS below), a word beginning with # causes that word and all
    remaining characters on that line to be ignored. An interactive shell without the interactive_comments
    option enabled does not allow comments. The interactive_comments option is on by default in interactive
    shells.
    Term
    As the code in an HTML file grows, it becomes increasingly difficult to keep track of how elements are related. Programmers use two tools to visualize the relationship between elements:
    Definition
    whitespace and indentation
    Term
    The second tool web developers use to make the structure of code easier to read is ___________. The spaces are inserted using the _______and _______bars on your keyboard.
    Definition
    indentation, space, tab
    Term
    Comments begin with _____ and end with ____. Any characters in between will be ignored by your browser.
    Definition
    Term
    Including comments in your code is helpful for many reasons:
    Definition
    They help you (and others) understand your code if you decide to come back and review it at a much later date.
    They allow you to experiment with new code, without having to delete old code.
    Term
    Including comments in your code is helpful for many reasons:
    Definition
    They help you (and others) understand your code if you decide to come back and review it at a much later date.
    They allow you to experiment with new code, without having to delete old code.
    Term
    HTML Tags
    Definition
    Let’s review what you’ve learned this lesson:

    The declaration should always be the first line of code in your HTML files. This lets the browser know what version of HTML to expect.
    The < html > element will contain all of your HTML code.
    Information about the web page, like the title, belongs within the < head > of the page.
    You can add a title to your web page by using the < title > element, inside of the head.
    A webpage’s title appears in a browser’s tab.
    Anchor tags () are used to link to internal pages, external pages or content on the same page.
    You can create sections on a webpage and jump to them using tags and adding ids to the elements you wish to jump to.
    Whitespace between HTML elements helps make code easier to read while not changing how elements appear in the browser.
    Indentation also helps make code easier to read. It makes parent-child relationships visible.
    Comments are written in HTML using the following syntax: .
    Term
    HTML Intro
    Definition
    Let’s review what you’ve learned so far: HTML stands for HyperText Markup Language and is used to create the structure and content of a webpage. Most HTML elements contain opening and closing tags with raw text or other HTML tags between them. HTML elements can be nested inside other elements. The enclosed element is the child of the enclosing parent element. Any visible content should be placed within the opening and closing < body > tags . Headings and sub-headings, < h1 > to < h6 > tags, are used to enlarge text.

    , < span > and < div > tags specify text or blocks. The < em > and < strong > tags are used to emphasize text. Line breaks are created with the < br > tag. Ordered lists (< ol >) are numbered and unordered lists (< ul >) are bulleted. Images (< img >) and videos (< video >) can be added by linking to an existing source.

    Term
    The _____element will contain all of the tabular data you plan on displaying
    Definition
    Term
    In many programs that use tables, the table is already predefined for you, meaning that it contains the_________________________________________
    Definition
    rows, columns, and cells that will hold data.
    Term
    The first step in entering data into the table is to add rows using the table row element:
    Definition
    Term
    Rows aren’t sufficient to add data to a table.
    Definition
    Each cell element must also be defined.
    Term
    In HTML, you can add data using the table data element:
    Definition
    Term
    An example of element < td >
    Definition
    73 81
    Term
    To add titles to rows and columns, you can use the table heading element:
    Definition
    Term
    Table heading example
    Definition
    Saturday Sunday
    Temperature 73 81
    Term
    Saturday Sunday
    Temperature 73 81
    Definition
    Note, also, the use of the scope attribute, which can take one of two values:

    row - this value makes it clear that the heading is for a row.
    col - this value makes it clear that the heading is for a column.
    Term
    Data can span columns using the ________ attribute. The attributes accepts an integer (greater than or equal to 1) to denote the number of columns it spans across.
    Definition
    colspan
    Monday Tuesday Wednesday
    Out of Town Back in Town
    Term
    Data can also span multiple rows using the ________attribute.
    Definition
    rowspan

    Term
    The rowspan attribute is used for data that
    Definition
    spans multiple rows (perhaps an event goes on for multiple hours on a certain day). It accepts an integer (greater than or equal to 1) to denote the number of rows it spans across.
    Term
    Long tables can be sectioned off using the table body element:
    Definition
    Term
    example
    Definition
    Saturday Sunday
    Morning Work Relax
    Afternoon
    Evening Dinner
    Term
    section off the table’s headings using the ______element.
    Definition
    Term
    example
    Definition
    Saturday Sunday
    Morning Work Relax
    Afternoon
    Evening Dinner
    Term
    The bottom part of a long table can also be sectioned off using the_____ element.
    Definition
    Term
    example
    Definition
    Quarter Revenue Costs
    Q1 $10M $7.5M
    Q2 $12M $5M
    Total $22M $12.5M
    Term
    HTML Tables Overview
    Definition
    element adds rows to a table. To add data to a row, you can use the element. Table headings clarify the meaning of data. Headings are added with the element. Table data can span columns using the colspan attribute. Table data can span rows using the rowspan attribute. Tables can be split into three main sections: a head, a body, and a footer. A table’s head is created with the element. A table’s body is created with the element. A table’s footer is created with the element. All the CSS properties you learned about in this course can be applied to tables and their data.
    The
    element creates a table. The
    Term
    HTML Tables Overview
    Definition
    element adds rows to a table. To add data to a row, you can use the element. Table headings clarify the meaning of data. Headings are added with the element. Table data can span columns using the colspan attribute. Table data can span rows using the rowspan attribute. Tables can be split into three main sections: a head, a body, and a footer. A table’s head is created with the element. A table’s body is created with the element. A table’s footer is created with the element. All the CSS properties you learned about in this course can be applied to tables and their data.
    The
    element creates a table. The
    Term
    the _____ attribute determines where the information is sent and the ______ attribute is assigned a HTTP verb that is included in the HTTP request. (Note: HTTP verbs like POST do not need to be capitalized for the request to work, but it’s done so out of convention. In the example above we could have written method="post" and it would still work)
    Definition
    action , method
    Term
    If we want to create an input field in our form , we’ll need the help of the ______element.
    Definition
    Term
    For a user to properly identify an we use the appropriately named _____ element.
    Definition
    Term
    To associate a < label > and an < input >, the < input > needs an ____ attribute.
    Definition
    id
    Term
    An ______ element will replace input text with another character like an asterisk (*) or a dot (•). The code below provides an example of how to create a password field:
    Definition
    < input type ="password" >
    Term
    To set the minimum and maximum values of the slider we assign values to the min and max attribute of the . We could also control how smooth and fluid the slider works by assigning the step attribute a value. Smaller step values will make the slider more fluidly, whereas larger step values will make the slider move more noticeably. Take a look at the code to create a slider:
    Definition
    form /form
    Term
    In a form we would use the element and set ______.
    Definition
    type="checkbox"
    Term
    exmaple of Checkbox Input
    Definition
    form

    Choose your pizza toppings:



    /form
    Term
    An Example of an Radio Button Input
    Definition
    form

    What is sum of 1 + 1?


    /form
    Term
    An example of a Dropdown list
    Definition
    form /form
    Term
    An example of a Datalist Input
    Definition
    form /form
    Term
    Textarea element
    Definition
    Term
    An example Textarea element
    Definition
    form
    form
    Term
    The ______ element is used to create a bigger text field for users to write more text
    Definition
    Term
    Submit Form
    Definition
    form /form
    Term
    Forms Review
    Definition
    In this lesson we went over: The purpose of a form is to allow users to input information and send it. The form‘s action attribute determines where the form’s information goes. The form‘s method attribute determines how the information is sent and processed. To add fields for users to input information we use the < input > element and set the type attribute to a field of our choosing: Setting type to "text" creates a single row field for text input. Setting type to "password" creates a single row field that censors text input. Setting type to "number" creates a single row field for number input. Setting type to "range" creates a slider to select from a range of numbers. Setting type to "checkbox" creates a single checkbox which can be paired with other checkboxes. Setting type to "radio" creates a radio button that can be paired with other radio buttons. Setting type to "list" will pair the with a < datalist > element. Setting type to "submit" creates a submit button. A < select > element is populated with < option > elements and renders a dropdown list selection. A < datalist > element is populated with < option > elements and works with an < input > to search through choices. A < textarea > element is a text input field that has a customizable area. When a form is submitted, the name of the fields that accept input and the value of those fields are sent as name=value pairs. Using the form element in conjunction with the other elements listed above allows us to create sites that take in consideration the wants and needs of our users. Take the opportunity to take what you’ve learned and apply it!
    Term
    Requiring an Input
    Definition
    form action="/example.html" method="POST"

    /form
    Term
    Set a Minimum and Maximum
    Definition
    form action="/example.html" method="POST" /form
    Term
    Checking Text Length
    Definition
    form action="/example.html" method="POST" /form
    Term
    Matching a Pattern
    Definition
    form action="/example.html" method="POST"
    /form
    Term
    An example Validation Review
    Definition
    Client-side validations happen in the browser before information is sent to a server.
    Adding the required attribute to an input related element will validate that the input field has information in it.
    Assigning a value to the min attribute of a number input element will validate an acceptable minimum value.
    Assigning a value to the max attribute of a number input element will validate an acceptable maximum value.
    Assigning a value to the minlength attribute of a text input element will validate an acceptable minimum number of characters.
    Assigning a value to the maxlength attribute of a text input element will validate an acceptable maximum number of characters.
    Assigning a regex to pattern matches the input to the provided regex.
    If validations on a form do not pass, the user gets a message explaining why and the form cannot be submitted.
    Term
    HTML5 introduces more descriptive HTML tags. These include ______ and others.
    Definition
    header, footer, nav, video, article, section
    Term
    These tags make your HTML easier to read, and also help with Search Engine Optimization (SEO) and accessibility.
    Definition
    header, footer, nav, video, article, section and other tags
    Term
    The main ____ tag helps search engines and other developers find the main content of your page.
    Definition
    HTML5
    Term
    The _____tag specifies the main content of a document. The content inside the ______ element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.
    Definition
    Term
    Note that _____elements are self-closing.
    Definition
    img
    Term
    All______elements must have an alt attribute. The text inside an alt attribute is used for screen readers to improve accessibility and is displayed if the image fails to load.
    Definition
    img
    Term
    Ideally the ______ attribute should not contain special characters unless needed.
    Definition
    alt
    Term
    You can use _____ elements to link to content outside of your web page.
    Definition
    anchor
    Term
    _____elements need a destination web address called an ____ attribute. They also need ____. Here's an example:
    Definition
    anchor,
    href,
    anchor text,
    this links to freecodecamp.org,
    Term
    To create an internal link, you assign a link's ____attribute to a ______plus the value of the id attribute for the element that you want to internally link to, usually further down the page. You then need to add the same id attribute to the element you are linking to. An id is an attribute that uniquely describes an element.
    Definition
    href,
    hash symbol #,
    Term
    Contacts ...

    Contacts

    Definition
    When users click the Contacts link, they'll be taken to the section of the webpage with the Contacts header element.
    Term
    the value ______ specifies to open the link in a new tab
    Definition
    "_blank"
    Term

    Here's a link to freecodecamp.org for you to follow.

    Definition
    Let's break down the example: Normal text is wrapped in the p element:

    Here's a ... for you to follow.

    Next is the anchor element (which requires a closing tag ): ... target is an anchor tag attribute that specifies where to open the link and the value "_blank" specifies to open the link in a new tab href is an anchor tag attribute that contains the URL address of the link: ... The text, "link to freecodecamp.org", within the anchor element called anchor text, will display a link to click: link to freecodecamp.org The final output of the example will look like this: Here's a link to freecodecamp.org for you to follow.
    Term
    Replace the href attribute value with a ______, also known as a hash symbol, to create a dead link.
    Definition
    #
    Term
    src=
    Definition
    A variable may be assigned to by a statement of the form

    name=[value]

    If value is not given, the variable is assigned the null string. All values undergo tilde expansion,
    parameter and variable expansion, command substitution, arithmetic expansion, and quote removal (see
    EXPANSION below). If the variable has its integer attribute set, then value is evaluated as an
    arithmetic expression even if the $((...)) expansion is not used (see Arithmetic Expansion below). Word
    splitting is not performed, with the exception of "$@" as explained below under Special Parameters.
    Pathname expansion is not performed. Assignment statements may also appear as arguments to the alias,
    declare, typeset, export, readonly, and local builtin commands.

    In the context where an assignment statement is assigning a value to a shell variable or array index, the
    += operator can be used to append to or add to the variable's previous value. When += is applied to a
    variable for which the integer attribute has been set, value is evaluated as an arithmetic expression and
    added to the variable's current value, which is also evaluated. When += is applied to an array variable
    using compound assignment (see Arrays below), the variable's value is not unset (as it is when using =),
    and new values are appended to the array beginning at one greater than the array's maximum index (for
    indexed arrays) or added as additional key-value pairs in an associative array. When applied to a
    string-valued variable, value is expanded and appended to the variable's value.
    Term
    An example of how to turn your image into a link
    Definition
    [image]
    Term
    Create a Bulleted Unordered List
    Definition
    • milk
    • cheese
    Term
    The word semantic means
    Definition
    “relating to meaning,” so semantic elements provide information about the content between the opening and closing tags.
    Term
    Why use Semantic HTML?
    Definition
    Accessibility: Semantic HTML makes webpages accessible for mobile devices and for people with disabilities as well. This is because screen readers and browsers are able to interpret the code better.

    SEO: It improves the website SEO, or Search Engine Optimization, which is the process of increasing the number of people that visit your webpage. With better SEO, search engines are better able to identify the content of your website and weight the most important content appropriately.

    Easy to Understand: Semantic HTML also makes the website’s source code easier to read for other web developers.
    Term
    A < header >
    Definition
    is a container usually for either navigational links or introductory content containing < h1 > to < h6 > headings.
    Term
    A
    Definition
    is used to define a block of navigation links such as menus and tables of contents. It is important to note that
    Term
    The element
    Definition
    is used to encapsulate the dominant content within a webpage.
    Term
    The content at the bottom of the subject information is known as the footer, indicated by
    Definition
    the
    element.
    Term
    The footer contains information such as:
    Definition
    Contact information
    Copyright information
    Terms of use
    Site Map
    Reference to top of page links
    Term
    defines
    Definition
    elements in a document, such as chapters, headings, or any other area of the document with the same theme.
    Term
    For example, content with the same theme such as articles about cricket can go under a single
    Definition
    Term
    example of
    Definition

    Fun Facts About Cricket

    Term
    The element
    Definition
    holds content that makes sense on its own.
    Term
    the tag can.......
    Definition
    hold content such as articles, blogs, comments, magazines, etc. The tag would help someone using a screen reader understand where the article content (that might contain a combination of text, images, audio, etc.) begins and ends.
    Term
    an example of an tag
    Definition

    Fun Facts About Cricket

    A single match of cricket can last up to 15 days.

    Term
    The
    Definition
    element is used to mark additional information that can enhance another element but isn’t required in order to understand the main content.
    Term
    This element can be used alongside other elements such as or
    .
    Definition
    Term
    Some common uses of the element are for:

    Bibliographies
    Endnotes
    Comments
    Pull quotes
    Editorial sidebars
    Additional information
    Definition
    Bibliographies
    Endnotes
    Comments
    Pull quotes
    Editorial sidebars
    Additional information
    Term
    is an element
    Definition
    used to encapsulate media such as an image, illustration, diagram, code snippet, etc, which is referenced in the main flow of the document.
    Term
    example
    Definition
    [image]
    Term
    Definition
    is an element used to describe the media in the
    tag.
    Term
    caption
    Definition
    [image]
    This picture shows characters from Overwatch.
    Term
    The
    Definition
    element is used to embed audio content into a document. Like
    Term
    There are many attributes for
    Definition
    controls: automatically displays the audio controls into the browser such as play and mute.

    src: specifies the URL of the audio file.
    Term
    example
    Definition
    Term
    using a
    Definition
    we can add videos to our website
    Term
    attributes that can alter a video playback include:
    Definition
    controls: When added in, a play/pause button will be added onto the video along with volume control and a fullscreen option.
    autoplay: The attribute which results in a video automatically playing as soon as the page is loaded.
    loop: This attribute results in the video continuously playing on repeat.
    Term
    example of
    Definition
    Term
    Another tag that can be used to incorporate media content into a page is the tag, which can embed any media content including videos, audio files, and gifs from an external source.
    Definition
    embed
    Term
    example of embed tag
    Definition
    embed src="download.gif"/
    Term
    SEMANTIC HTML
    Review
    Congrats on completing this lesson on Semantic HTML! Now that you know the benefits of Semantic HTML and how to use it, you can incorporate semantic elements into your website to make it more accessible and to make the code easier to read.

    Let’s review some of the topics we covered throughout the lesson:
    Definition
    Semantic HTML introduces meaning to a page through specific elements that provide context as to what is in between the tags. Semantic HTML is a modern standard and makes a website accessible for people who use screen readers to translate the webpage and improves your website’s SEO.
    ,
    Term
    he Web Structure

    The ability to code using HTML is essential for any web professional. Acquiring this skill should be the starting point for anyone who is learning how to create content for the web.
    Definition
    Modern Web Design
    HTML: Structure
    CSS: Presentation
    JavaScript: Behavior

    PHP or similar: Backend
    CMS: Content Management
    Supporting users have an ad free experience!