part2
Cards (97)
- Front-end development is the process of building and maintaining the user-facing parts of a website or web application
- 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
- 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
- HTML (Hypertext Markup Language)The markup language used to structure and organize content on a web page
- CSS (Cascading Style Sheets)Used to add styling to a web page, including colors, fonts, layouts, and animations
- JavaScriptUsed to add interactivity to a web page, such as validating forms, creating animations, and handling user events
- Front-end frameworks
- Bootstrap
- Foundation
- React
- AngularJS
- jQuery
- HTML is the set of markup symbols or codes placed in a file that is intended for display on a web page
- The browser interprets the markup code and renders the page
- 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
- 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>
- 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
- Sections of a web page
- Head
- Body
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- Definition list elementUsed in XHTML and earlier versions of HTML. A description list is useful for organizing terms and their descriptions.
- My Favorite Colors
- Blue
- Teal
- Red
- Web System and Technologies I
- DEPARTMENT OF COMPUTER STUDIES CAVITE STATE UNIVERSITY – Imus Campus
- Description listsBegin 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.
- Sample Description List
- TCP
- IP
- FTP
- HTTP
- Description list
- Organizes terms and their descriptions
- Table elementA block display element that contains tabular information. The purpose of a table is to organize information.
- Some table attributes are obsolete in HTML5, but it is useful to be aware of even obsolete attributes</b>
- Modern web developers prefer to configure the style of tables with CSS properties instead of with HTML attributes
- HTML table
- Composed of rows and columns, like a spreadsheet. Each individual table cell is at the intersection of a specific row and column.
- Creating an HTML table1. Each table begins with a <table> tag and ends with a </table> tag2. Each table row begins with a <tr> tag and ends with a </tr> tag3. Each cell (table data) begins with a <td> tag and ends with a </td> tag4. Table cells can contain text, graphics, and other HTML elements
- Table captionThe 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.
- Table row elementConfigures a row within a table on a web page. The table row begins with a <tr> tag and ends with a </tr> tag.