Coding Basics


HTML

Elements and Structure

Introduction to HTML

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 contain opening and closing tags between them. Any visible content should be within the opening and closing "body" tags. Heading and sub-headings, "h1" to "h6" tags, are used to provide titles for sections of content. "p", "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.

HTML Document Standards

The "!DOCTYPE html" 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 the browser's tab. Anchor tags ("a") are used to link to internal pages, external pages, and content on the same page. You can create sections on a webpage and jump to them using the "a" tags and adding "id"s to the elements you wish to jump to. Whitespace between elements helps to make code easier to read while not changing how elements appear in the browser. Indentation also helps make code easier to read. It also makes parent-child relationships visible. Comments are written in HTML using the following syntax: "!-- comment --"

HTML Tables

The "table" element creates a table. The "tr" element adds rows to a table. To add data to a row, you can use the "td" element. Table headings clarify the meaning of data. Headings are added with the "th" 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 "thead" element. A table's body is created with the "tbody" element. A table's footer is created with the "tfoot" element. All the CSS properties can be applied to tables and their data.

Forms

HTML Forms

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 user to input information, we use the "input" element and set the "type" attribute to a field of your choosing.

A "select" element is populated with "option" elements and renders a dropdown list selection. A "datalist" element is populated with the "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.

Form Validation

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.

Semantic HTML

Semantic HTML introduces meaning to a page through specific elements that provide context as to what is 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. "header", "nav", "main" and "footer" create the basic structure of the webpage. "section" defines elements in a document, such as chapters, headings or other area of the document with the same theme. "article" holds content that makes sense on its own such as articles, blogs, comments, etc. "aside" contains information that is related to the main content, but no required in order to understand the dominant information. "figure" enscapulates all types of media. "figcaption" is used to describe the media in "figure". "video", "embed", and "audio" elements are used for media files.


CSS

Syntax and Selectors

Setup and Syntax

The basic anatomy of CSS syntax written for both inline styles and stylesheets. Some commonly used CSS terms, such as ruleset, selector, and declaration. CSS inline styles can be written inside the opening HTML tag using the "style" attribute. Inline styles can be used to style HTML, but it is not the best practice. An internal stylesheet is written using the "style" element inside the "head" element of an HTML file. Internal stylesheets can be used to style HTML but are also not the best practice. An external stylesheet separates CSS code from HTML, by using the .css file extension. External stylesheets are the best approach when it comes to using HTML and CSS. External stylesheets are linked to HTML using the "link" element.

Selectors

CSS can select HTML elements by type, class, ID, and attribute. All elements can be selected using the universal selector. An element can have different states using the pseudo-class selector. Multiple CSS classes can be applied to one HTML element. Classes can be reusable, while IDs can only be used once. IDs are more specific than type. That means IDs will override any styles from a class, and classes will override any styles from a type selector. Multiple selectors can be chained together to select an element. This raises the specificity but can be necessary. Nested elements can be selected by separating selectors with a space. Multiple unrelated selectors can recieve the same styles by separating the selector names with commas.

Visual Rules

The "font-family" property defines the typeface of an element. "font-size" controls the size of text displayed. "font-weight" defines how thin or thick text is displayed. The "text-align" property places text in the left, right, or center of its parent container. Text can have two different color attributes: "color" and "background-color". "color" defines the color of the text, while "background-color" defines the color behind the text. CSS can make an element transparent with the "opacity" property. CSS can also set the background of an element to an image with the background-image property. The "!important" flag will override any style, however it should almost never be used, as it is extremely difficult to override.

The Box Model

The Box Model

The box model comprises a set of properties used to create space around and between HTML elements. The height and width of a content area can be set in pixels or percentages. Borders surround the content area and padding of an element. The color, style, and thickness of a border can be set with CSS properties. Padding is the space between the content area and the border. It can be set in pixels or percent. Margin is the amount of spacing outside of an element's border. Horizontal margins add, so the total space between the borders of adjacent elements is equal to the sum of the right margin of one element and the left margin of the adjacent element. Vertical margins collapse, so the space between vertically adjacent elements is equal to the larger margin. "margin: 0 auto" horizontally centers an element inside of its parent content area, if it has a width. The "overflow" property can be set to "display", "hide", or "scroll" and dictates how HTML will render content that overflows its parent's content area. The "visibility" property can hide or show elements.

Changing the Box Model

In the default box model, box dimensions are affected by border thickness and padding. The "box-sizing" property controls the box model used by the browser. The default value of the "box-sizing" property is "content-box". The value for the new box model is "border-box". The "border-box" model is not affected by border thickness or padding.

Display and Positioning

The "position" property allows you to specify the position of an element. When set to "relative", an element's position is relative to its default position on the page. When set to "absolute", an element's position is relative to its closest positioned parent element. It can be pinned to any part of the web page, but the element will still move with the rest of the document when the page is scrolled. When set to "fixed", an element's position can be pinned to any part of the web page. The element will remain in view no matter what. When set to "sticky", an element can stick to a defined offset position when the user scrolls to its parent container. The "z-index" of an element specifies how far back or how far forward an element appears on the page when it overlaps other elements. The "display" property allows you to control how an element flows vertically and horizontally in a document. "inline" elements take up as little space as possible, and they cannot have manually adjusted "width" or "height". "block" elements take up the width of their container and can have manually adjusted "height"s. "inline-block" elements can have set "width" and "height", but they can also appear next to each other and do not take up their entire container width. The "float" property can move elements as far left or as far right as possible on a web page. You can clear an element's left or right side (or both) using the "clear" property.

Colors

There are four ways to represent color in CSS:

You can add opacity to color in RGB and HSL by adding a fourth value, "a", which is represented as a percentage.

Typography

Typography is the art of arranging text on a page. Text can appear bold or thin with the "font-weight" property. Text can appear in italics with the "font-style" property. The vertical spacing between lines of text can be modified with the "line-height" property. Serif fonts have extra details on the ends of each letter. Sans-Serif fonts do not. Fallback fonts are used when a certain font is not installed on a user's computer. The "word-spacing" property changes how far apart individual words are. The "letter-spacing" property changes how far apart individual letters are. Rge "text-align" property changes the horizontal alignment of text. Google Fonts provides free fonts that can be used in an HTML file with the "link" tag or the "@font-face" property. Local fonts can be added to a document with the "@font-face" property and the path to the font's source.

Index of Codes


HTML


CSS