part2

    avatar
    Created by
    katerin

    Cards (97)

    • Front-end development is the process of building and maintaining the user-facing parts of a website or web application
      View source
    • Front-end development

      • Involves using programming languages such as HTML, CSS, and JavaScript to create and style the visual elements of a website, as well as to add interactive features and functionality
      • Front-end developers must also be familiar with web standards and best practices, as well as web accessibility and usability guidelines
      • Front-end developers need to have an eye for design and a keen sense of user experience, as their work directly impacts how users interact with a website or web application
      View source
    • Front-end development plays a critical role in the success of a website or web application, as it determines the overall look, feel, and functionality of the user-facing parts of the site
      View source
    • HTML (Hypertext Markup Language)

      The markup language used to structure and organize content on a web page
      View source
    • CSS (Cascading Style Sheets)
      Used to add styling to a web page, including colors, fonts, layouts, and animations
      View source
    • JavaScript
      Used to add interactivity to a web page, such as validating forms, creating animations, and handling user events
      View source
    • Front-end frameworks
      • Bootstrap
      • Foundation
      • React
      • AngularJS
      • jQuery
      View source
    • HTML is the set of markup symbols or codes placed in a file that is intended for display on a web page
      View source
    • The browser interprets the markup code and renders the page
      View source
    • Tags
      • Each individual markup code is referred to as an element or tag
      • Tags are enclosed in angle brackets, the < and > symbols
      • Most tags come in pairs: an opening tag and a closing tag
      • Some tags are used alone and are not part of a pair
      • Acts as containers and are sometimes referred to as container tags
      • Most tags can be modified with attributes that further describe their purpose
      View source
    • Document Type Definition (DTD)
      • Identifies the version of HTML contained in your document
      • Browsers and HTML code validators can use the information in the DTD when processing the web page
      • The DTD statement, commonly called a doctype statement, is the first line of a web page document
      • The DTD for HTML5 is: <!DOCTYPE html>
      View source
    • HTML element
      • The purpose of the html element is to indicate that the document is HTML formatted
      • The opening <html> tag is placed on a line below the DTD, and the closing </html> tag indicates the end of the web page
      • The lang attribute specifies the spoken language of the document
      View source
    • Sections of a web page
      • Head
      • Body
      View source
    • Head section
      • Contains information that describes the web page document
      • Elements in the head section include the title of the web page, meta tags that describe the document, and references to scripts and styles
      View source
    • Title element
      • The text between the <title> and </title> tags is called the title of the web page and is accessed when web pages are bookmarked and printed
      • Search engines use the title text to help determine keyword relevance and even display the title text on the results page of a search
      • A descriptive title that includes the website or organization name is a crucial component for establishing a brand or presence on the Web
      View source
    • Meta element
      • Describes a characteristic of a web page, such as the character encoding
      • Character encoding is the internal representation of letters, numbers, and symbols in a file such as a web page or other file that is stored on a computer and may be transmitted over the Internet
      • It is common practice to use a character-encoding set that is widely supported, such as utf-8
      • The meta tag uses the charset attribute to indicate the character encoding
      View source
    • Body section
      • Contains text and elements that display directly on the web page in the browser window
      • The purpose of the body section is to configure the contents of the web page
      View source
    • Heading elements
      • Organized into six levels: h1 through h6
      • The text contained within a heading element is rendered as a "block" of text by the browser and displays with empty space above and below
      • The size of the text is largest for <h1> and smallest for <h6>
      • Depending on the font being used, the text contained within <h4>, <h5>, and <h6> tags may be displayed smaller than the default text size
      • All text contained within heading tags is displayed with bold font weight
      View source
    • Paragraph element
      • Used to group sentences and sections of text together
      • Text that is contained by <p> and </p> tags display as a "block" and will appear with empty space above and below it
      View source
    • Align attribute
      • Modifies the element's horizontal alignment (left, center, or right) on a web page
      • Left alignment is the default alignment for web pages
      • The align attribute is obsolete in HTML5
      View source
    • Line break element
      • Causes the browser to advance to the next line before displaying the next element or portion of text on a web page
      • Coded as
      View source
    • Blockquote element
      • Used to display a block of quoted text in a special way - indented from both the left and right margins
      • Begins with a <blockquote> tag and ends with a </blockquote> tag
      View source
    • Phrase elements
      • Indicate the context and meaning of the text between the container tags
      • Displayed right in line with the text (referred to as inline display) and can apply to a section of text or even just a single character of text
      View source
    • Ordered list
      • Can be organized by the use of numerals (the default), uppercase letters, lowercase letters, uppercase Roman numerals, and lowercase Roman numerals
      • The type attribute configures the symbol used for ordering the list
      • The start attribute is useful when you need a list to begin with an integer value other than 1
      • The new HTML5 reversed attribute (set reversed="reversed") configures the list markers to display in descending order
      View source
    • Unordered list
      • Displays a bullet, or list marker, before each entry in the list
      • The bullet can be one of several types: disc (the default), square, and circle
      • Begins with a <ul> tag and ends with a </ul> tag
      • Each list item begins with an <li> tag and ends with an </li> tag
      View source
    • Description list
      • Useful for organizing terms and their descriptions
      • Begins with the <dl> tag and ends with the </dl> tag
      • Each term or name in the list begins with the <dt> tag and ends with the </dt> tag
      • Each description begins with the <dd> tag and ends with the </dd> tag
      View source
    • Definition list element
      Used in XHTML and earlier versions of HTML. A description list is useful for organizing terms and their descriptions.
      View source
    • My Favorite Colors

      • Blue
      • Teal
      • Red
      View source
    • Web System and Technologies I
      View source
    • DEPARTMENT OF COMPUTER STUDIES CAVITE STATE UNIVERSITY – Imus Campus
      View source
    • Description lists
      Begin with the <dl> tag and end with the </dl> tag. Each term or name in the list begins with the <dt> tag and ends with the </dt> tag. Each description begins with the <dd> tag and ends with the </dd> tag.
      View source
    • Sample Description List
      • TCP
      • IP
      • FTP
      • HTTP
      View source
    • Description list

      • Organizes terms and their descriptions
      View source
    • Table element
      A block display element that contains tabular information. The purpose of a table is to organize information.
      View source
    • Some table attributes are obsolete in HTML5, but it is useful to be aware of even obsolete attributes</b>
      View source
    • Modern web developers prefer to configure the style of tables with CSS properties instead of with HTML attributes
      View source
    • HTML table
      • Composed of rows and columns, like a spreadsheet. Each individual table cell is at the intersection of a specific row and column.
      View source
    • Creating an HTML table

      1. Each table begins with a <table> tag and ends with a </table> tag
      2. Each table row begins with a <tr> tag and ends with a </tr> tag
      3. Each cell (table data) begins with a <td> tag and ends with a </td> tag
      4. Table cells can contain text, graphics, and other HTML elements
      View source
    • Table caption
      The caption element is often used with a table to describe its contents. The caption begins with a <caption> tag and ends with a </caption> tag.
      View source
    • Table row element
      Configures a row within a table on a web page. The table row begins with a <tr> tag and ends with a </tr> tag.
      View source
    See similar decks