CSS Flexbox and Responsive Web Design PDF

CSS FLEXBOX AND RESPONSIVE WEB DESIGN ISP465  CSS FLEXBOX LAYOUT OUTLINES RESPONSIVE WEB DESIGN CSS FLEXBOX LAYOUT  CSS Flexible Box Layout (Flexbox) The Flexbox Layout (Flexible Box) aims at providing a more efficient way to lay out, align and distribute space a...

CSS FLEXBOX AND RESPONSIVE WEB DESIGN ISP465  CSS FLEXBOX LAYOUT OUTLINES RESPONSIVE WEB DESIGN CSS FLEXBOX LAYOUT  CSS Flexible Box Layout (Flexbox) The Flexbox Layout (Flexible Box) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”). The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space or shrinks them to prevent overflow.Best used for one dimension – a row or a column The display property Configures a flexbox container -> display: flex; Basic terminology: parent element, known as “flex container” a child element of the flex container, known as “flex item”.container { display: flex; } 4  Flex Layout The flex layout is based on “flex-flow directions”. Items will be laid out following either the main axis (from main-start to main-end) or the cross axis (from cross-start to cross-end). main axis – The main axis of a flex container is the primary axis along which flex items are laid out. Beware, it is not necessarily horizontal; it depends on the flex-direction property (see below). main-start | main-end – The flex items are placed within the container starting from main-start and going to main-end. main size – A flex item’s width or height, whichever is in the main dimension, is the item’s main size. The flex item’s main size property is either the ‘width’ or ‘height’ property, whichever is in the main dimension. cross axis – The axis perpendicular to the main axis is called the cross axis. Its direction depends on the main axis direction. cross-start | cross-end – Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side. cross size – The width or height of a flex item, whichever is in the cross dimension, is the item’s cross size. The cross size property is whichever of ‘width’ or ‘height’ that is in the cross dimension. 5 Flexbox Properties: Parent (Flex container) display This defines a flex container; inline or block.container { depending on the given value. It enables a flex display: flex; } context for all its direct children. flex-direction.container { flex-direction: row | row-reverse | This establishes the main-axis, thus defining the column | column-reverse; direction flex items are placed in the flex } container. row (default): left to right in ltr; right to left in rtl row-reverse: right to left in ltr; left to right in rtl column: same as row but top to bottom column-reverse: same as row-reverse but bottom to top Flexbox Properties: Parent (Container) flex-wrap.container { flex-wrap: nowrap | wrap | wrap- By default, flex items will all try to fit onto one reverse; line. } nowrap (default): all flex items will be on one line wrap: flex items will wrap onto multiple lines, from top to bottom. wrap-reverse: flex items will wrap onto multiple lines from bottom to top. flex-flow This is a shorthand for the flex-direction.container { and flex-wrap properties, which together flex-flow: column wrap; define the flex container’s main and cross axes. } The default value is row nowrap.  Flexbox Properties: Parent (Container) justify-content This defines the alignment along the main axis. It helps distribute extra free.container { space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control justify-content: flex-start | flex- over the alignment of items when they overflow the line. end | center | space-between | space- flex-start (default): items are packed toward the start of the flex-direction. around | space-evenly | start | end | flex-end: items are packed toward the end of the flex-direction. left | right... + safe | unsafe; start: items are packed toward the start of the writing-mode direction. } end: items are packed toward the end of the writing-mode direction. left: items are packed toward left edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like start. right: items are packed toward right edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like start. center: items are centered along the line space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line space-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies. space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.  Flexbox Properties: Parent (Container) align-item This defines the default behavior for how flex.container { align-items: stretch | flex-start | items are laid out along the cross axis on the flex-end | center | baseline | first current line. Think of it as the justify-content baseline | last baseline | start | version for the cross-axis (perpendicular to the end | self-start | self-end +... main-axis). safe | unsafe; } stretch (default): stretch to fill the container (still respect min-width/max-width) flex-start / start / self-start: items are placed at the start of the cross axis. The difference between these is subtle, and is about respecting the flex- direction rules or the writing-mode rules. flex-end / end / self-end: items are placed at the end of the cross axis. The difference again is subtle and is about respecting flex-direction rules vs. writing-mode rules. center: items are centered in the cross-axis baseline: items are aligned such as their baselines align  Flexbox Properties: Parent (Container) gap, row-gap, column-gap.container { The gap property explicitly controls the space display: flex;... between flex items. It applies that spacing gap: 10px; gap: 10px 20px; row-gap: 10px; It is not exclusively for flexbox, gap works in grid column-gap: 20px; and multi-column layout as well. } Flexbox Properties: Children (flex items).item { order order: 5; By default, flex items are laid out in the source order. However, } the order property controls the order in which they appear in the flex container. Negative numbers are invalid. flex-grow This defines the ability for a flex item to grow if necessary. It.item { accepts a unitless value that serves as a proportion. It dictates flex-grow: 4; what amount of the available space inside the flex container the } item should take up. If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, that child would take up twice as much of the space either one of the others. Negative numbers are invalid. Flexbox Properties: Children (flex items) flex-shrink.item { flex-shrink: 3; This defines the ability for a flex item to shrink } if necessary. Negative numbers are invalid. flex-basic This defines the default size of an element.item { before the remaining space is distributed. It flex-basis: | auto; can be a length (e.g. 20%, 5rem, etc.) or a } keyword. If set to 0, the extra space around content isn’t factored in. If set to auto, the extra space is distributed based on its flex-grow value. Flexbox Properties: Children (flex items) flex.item { flex: none | [ This is the shorthand for flex-grow, flex-shrink and flex- ? || ] basis combined. } The second and third parameters (flex-shrink and flex- basis) are optional. The default is 0 1 auto, but if you set it with a single number value, like flex: 5;, that changes the flex-basis to 0%, so it’s like setting flex-grow: 5; flex-shrink: 1; flex-basis: 0%; It is recommended that you use this shorthand property rather than set the individual properties. nav { flex: 1; } main { flex: 7; } aside { flex: 2; } Flexbox Properties: Children (flex items) align-self.item { align-self: auto | flex-start | This allows the default alignment (or the one flex-end | center | baseline | stretch; specified by align-items) to be overridden for } individual flex items. Configure Flex Items By default flex items are flexible in size and allocated the same amount of space in the flex container The flex property Customizes the size of each flex item Indicated the flex grow factor Indicates the flex shrink factor Can be used to indicate a proportional flexible item nav { flex: 1; } main { flex: 7; } aside { flex: 2; } 15 RESPONSIVE WEB DESIGN WHAT IS RESPONSIVE WEB DESIGN? Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. Techniques: Fluid Layout CSS Media Queries Flexible Images MEDIA QUERIES Media queries can modify the appearance (and even behavior) or a website or app based on a matched set of conditions about the user’s device, browser or system settings. Media queries can be implemented at: HTML ( area using by attaching different css file based on device) CSS (the most practical approach using @media-queries syntax) JavaScript (using the window.matchMedia() method to define the conditions) CSS Media Queries Media queries in CSS3 extended the CSS2 media types idea: Instead of looking for a type of device, they look at the capability of the device. Media queries can be used to check many things, such as: width and height of the viewport width and height of the device orientation (is the tablet/phone in landscape or portrait mode?) resolution Using media queries are a popular technique for delivering a tailored style sheet to desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones).  CSS Media Queries Anatomy Media type What type of media are you trying to target? In many (if not most) cases, a screen value used here, which makes sense since many of the media types we’re trying to match are devices with screens attached to them. Some of supported media: all: Matches all devices print: Matches documents that are viewed in a print preview or any media that breaks the content up into pages intended to print. screen: Matches devices with a screen Media feature Start defining what features you are trying to match it to. Most frequently used are screens to width, where screen is the type and both min-width and max-width are features with specific values. Other types of media features supported: viewport display quality color interaction video prefixed scripting user preference  CSS Media Queries Anatomy Operator Media queries support logical operators like many programming languages that able to match media types based on certain conditions. The @media rule is itself a logical operator that is basically stating that “if” the following types and features are matches, then do some stuff. and use the and operator if you want to target screens within a range of widths: or (or comma-separated) use comma-separate features as a way of using an or operator to match different ones: not target devices by what they do not support or match. This example declaration removes the body’s background color when the device is a printer and can only show one color. CSS Media Queries Anatomy (cont.) or (or comma-separated) use comma-separate features as a way of using an or operator to match different ones: not target devices by what they do not support or match. This example declaration removes the body’s background color when the device is a printer and can only show one color. CSS Media Queries Breakpoint @media only screen and (max-width: 600px) {...} @media only screen and (min-width: 600px) {...} @media only screen and (min-width: 768px) {...} @media only screen and (min-width: 992px) {...} @media only screen and (min-width: 1200px) {...} Thank You Cascading Style Sheets 3 – Part 2 ISP465: Introduction to Front End Web Development  CSS Box-Model OUTLINE CSS Position CSS Grid CSS BOX MODEL Content: the inner content of your HTML element. Padding: a box that surrounds an HTML element's inner content. Border: a box that surrounds an HTML element's padding. Margin: a functionally invisible box that surrounds an HTML element's border. The margin is meant to act as white space to separate HTML elements from each other. MARGIN Margins are transparent space and used to create space around elements - OUTSIDE its border. margin-top: The top margin size margin-right: The right margin size margin-bottom: The bottom margin size margin-left: The left margin size margin: Sets all four properties at once MARGIN:SUPPORTED VALUE All the margin properties can have the following values: auto - the browser calculates the margin. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins. length - specifies a margin in px, pt, cm, etc. % - specifies a margin in % of the width of the containing element inherit - specifies that the margin should be inherited from the parent element Margin ALLOW its value to be a negative number.  MARGIN SHORTHAND MARGIN 4 VALUES MARGIN 3 VALUES MARGIN 2 VALUES MARGIN 1 VALUE Syntax margin: 25px 50px 75px margin: 25px 50px 75px; margin: 25px 50px; margin: 25px; 100px; Description top margin is 25px top margin is 25px top and bottom margins all four margins are 25px right margin is 50px right and left margins are are 25px bottom margin is 75px 50px right and left margins are left margin is 100px bottom margin is 75px 50px Margin 2 values Margin 4 values Margin 3 values Margin 1 value PADDING Padding is Paddings are used to generate space around the given element's content - INSIDE its border: padding-top: The top padding size padding-right: The right padding size padding-bottom: The bottom padding size padding-left: The left padding size padding: Sets all four properties at once Don't be afraid to use lots of padding PADDING:SUPPORTED VALUE length - specifies a padding in px, pt, cm, etc. % - specifies a padding in % of the width of the containing element inherit - specifies that the padding should be inherited from the parent element. Padding DISALLOW its value to be a negative number.  PADDING SHORTHAND PADDING 4 VALUES PADDING 3 VALUES PADDING 2 VALUES PADDING 1 VALUE Syntax padding: 25px 50px 75px padding: 25px 50px padding: 25px 50px; padding: 25px; 100px; 75px; Description top padding is 25px top padding is 25px top and bottom padding all four padding are 25px right padding is 50px right and left padding are are 25px bottom padding is 75px 50px right and left padding are left padding is 100px bottom padding is 75px 50px Padding 2 values Padding 1 value Padding 4 values Padding 3 values BOX-SIZING: PADDING WITHOUT BOX-SIZING The CSS box-sizing property allows us to include the padding and border. By default, the width and height of an element is calculated like this: width + padding + border = actual width of an element height + padding + border = actual height of an element der in an element's total width and height. BOX-SIZING: PADDING BOX-SIZING – border-box The box-sizing property allows us to include the padding and border in an element's total width and height. In this mode, the width and height properties include content, padding, and borders i.e if we set an element’s width to 300 pixels, that 300 pixels will include any border or padding we added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements. BOX-SIZING: PADDING BOX-SIZING – content-box The box-sizing property allows us to include the padding and border in an element's total width and height. In this mode, the width and height properties include only the content. Border and padding are not included in it i.e if we set an element’s width to 200 pixels, then the element’s content box will be 300 pixels wide, and the width of any border or padding will be added to the final rendered width. BORDER The border is a (usually visible) border border-style: The type of border none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset border-color: The color of the border border-width: The width (thickness) of the border Border-radius: To add rounded borders to an element border: Sets all three at once All four borders can also be set separately border-xxx-style border-xxx-color border-xxx-width border-xxx Where xxx is one of left, right, top, bottom CSS POSITION The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky). CSS POSITION: STATIC This is the default CSS position applicable to all HTML elements. This position place the HTML elements based on normal document flow. Using this position, top/right/bottom/left properties can not be applicable to elements (ie., static position elements don’t obey top/right/bottom/left properties). Page scrolling does affect this position. CSS POSITION: RELATIVE This position places the element relative to its normal position. This position is relative to normal document flow. Here top/right/bottom/left properties can be applied to elements. Page scrolling does affect this position. If position only applied without top/right/bottom/left properties, it will act like Static position. CSS POSITION: ABSOLUTE This position places the element at the exact position specified. This position is relative to its parent element position when parent element position is relative/absolute. document body (browser viewport) when parent element position is static. document body (browser viewport) when there is no parent element. Page scrolling does affect this position. This position element is completely removed from normal document flow. CSS POSITION: FIXED This position places the element at a fixed place relative to the viewport. Page scrolling does not affect this position. This position element is completely removed from normal document flow CSS GRID The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning. To implement grid, we need at least two elements - a parent element called grid container and at least one child element called grid item. Adding display: grid makes the.container element a grid container. Property grid-template-columns to specify the number of columns and width of each.  CSS GRID CONTAINER An HTML element becomes a grid container when its display property is set to grid or inline-grid. Set the div class as grid- container Apply css and set display output output inline-grid Apply css and set display grid Grid-template-columns is set to 3 column with size is auto CSS GRID ITEM Inline-grid grid CSS GRID: grid-template-columns The property grid-template-columns is used to specify how many columns you need and of what size each. This is done by specifying the widths of each column in % , px , rem or any valid value for width separated by spaces. The number of individual values specify will be the number of columns created. EXAMPLE OF CSS GRID USAGE CSS POSITION VS CS GRID THANK YOU CASCADING STYLE SHEETS 3 – PART 1 ISP465 – INTRODUCTION TO FRONT-END DEVELOPMENT OUTLINES  Introduction to CSS3  CSS Selectors  CSS Properties  CSS Units  Applying CSS to HTML: In-Line, Internal, and External  CSS Div and Span WHAT IS CSS? CSS (Cascading Style Sheets) is for the formatting side of the Web CSS describes how rendered HTML documents should look CSS considers the physical and visual display of the document (the Style) ADVANTAGES OF CSS  The use of CSS separates document layout from document content  Different people can be responsible for the two parts  Document author can focus on content  Graphic designer can focus on layout  A single file can control the look of an entire web site  Easy to modify look of web site without affecting its contents  Easy to obtain a consistent look (the R in CRAP)  If done correctly, documents degrade gracefully on platforms that don't support visual formatting  CSS PROPERTY  HTML elements are style using CSS properties. Different HTML elements may have different CSS properties.  CSS properties can be organized into CSS rules. A CSS rule groups a set of CSS properties together, and applies all properties to the HTML elements matched by the CSS rule.  A CSS property declaration consists of a property name and a property value,  Some basic CSS properties to work with:  Text Properties  List Properties  Border Properties  Font Properties CSS SELECTOR: UNIVERSAL  The universal selector (*) selects all HTML elements on the page. CSS SELECTOR: HTML ELEMENTS  CSS selectors are used to "find" (or select) the HTML elements you want to style.  The element selector selects HTML elements based on the element name. CSS SELECTOR: ID  The id selector uses the id attribute of an HTML element to select a specific element.  The id of an element is unique within a page, so the id selector is used to select one unique element!  To select an element with a specific id, write a hash (#) character, followed by the id of the element. CSS SELECTOR: CLASS  The class selector selects HTML elements with a specific class attribute.  To select elements with a specific class, write a period (.) character, followed by the class name. CSS SELECTOR: GROUPING SELECTOR  The grouping selector selects all the HTML elements with the same style definitions. CSS SELECTOR: COMPOUND SELECTOR  A compound selector can mix the previous 3 types using more than one class, ID and/or tag.  This type of selector has a higher priority than the other methods. CSS UNIT  CSS units are numeric type values that are used to determine the size of a property such as a margin, width, height, padding, font-size, and etc. The margin is the property and 10px is the value of the property. px is the CSS unit called pixel.  Two types of length used on CSS:  Absolute  Relative CSS UNIT: ABSOLUTE  Absolute length units are fixed across everywhere else. Also, it remains absolute if the output device has a higher resolution.  Absolute length units are not recommended for use on screen, because screen sizes vary so much. However, they can be used if the output medium is known, such as for print layout.  the primary disadvantage is that, in many cases, the user has no control over those values (also depending on the browser). For instance, font sizes defined using absolute values are normally permanent.  The inch (in), the centimetre (cm), the millimetre (mm), the point (pt), and the pica (pc) are all absolute units. CSS UNIT: RELATIVE  Relative length units are relative to another element's size or settings.  For example, the relative font size of an element may be calculated using the parent element's font size.  The benefit of using relative units is that the font size, padding or other elements scale relative to everything else on the page.  CSS UNIT: RELATIVE EXAMPLE Full size px em rem Reduce size CSS UNIT: RULE OF THUMB px (absolute) % (relative) em (relative) Avoid using 'px' for font-sizes. Use Recommended using percentage for Use 'em' for font-size and mostly for small details like border layouts and width/height. margin/padding. and shadow. For example, laying out links on changes behaviour based on fixed in size navbar, placing image inside a div, property. not responsive etc. 1 em = parent font size. overrides user's browser preference Size is defined as percentage of if parent doesn't have size, default another value(parent element) to 16px (body). rem (relative) vw/vh (relative) Use 'rem' for font-size and vw/vh are relative to the margin/padding. width/height of the browser widows. 'rem is more consistent than 'em'. 100vw means full width of screen. relative to root HTML, default is 16px use vw/vh for bigger layouts, like background. useful for responsive website because everything is scales.  USING CSS  There are three ways to use CSS  External Style Sheets  Uses the LINK tag (in the document HEAD)  Internal Style Sheets  The STYLE tag (in the document HEAD)  Inline STYLE Attributes  The STYLE attribute (within another HTML tag) CSS: DIV AND SPAN TAGS  CSS: DIV AND SPAN TAGS  HTML has 2 tags, DIV and SPAN, that are specifically used with CSS and CLASS and ID attributes  A DIV tag contains a block of text – block level element  Like a paragraph, section heading, or title  A block-level element always starts on a new line.  A block-level element always takes up the full width available (stretches out to the left and right as far as it can).  A block level element has a top and a bottom margin, whereas an inline element does not.  A SPAN tag contains a short piece of text within a block – inline level element  Like a proper name, or a dollar amount  An inline element does not start on a new line.  An inline element only takes up as much width as necessary. THANK YOU ISP465: Introduction to Front End Web Development HTML STRUCTURE PART II  OUTLINES HTML Semantics HTML Tags, Block Tags, Inline Tags HTML Class and HTML ID Forms HTML SEMANTICS A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: and - Tells nothing about its content. Examples of semantic elements: , , and - Clearly defines its content. The most common and important semantic elements into four categories: Document structure tags Textual meaning tags Media type tags Correlation tags SEMANTIC ELEMENT CATEGORIES Document Textual Correlation Media Type Structure Meaning Tags -  & The HTML element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements. Although this element is named a , it is not required to be used at the top of the page and can be used in other subsection components such as and. Note: You can have several elements in one HTML document. However, cannot be placed within a , or another element. The HTML element represents a footer for its nearest sectioning content or sectioning root element. A footer typically contains information about the author of the section, copyright data, or links to related documents. Typically, only one element is included at the bottom of the document, but we can include one for each or element as long as it does not descend from another or element. Note: You can have several elements in one document.  The HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes. Note: NOT all links of a document should be inside a element. The element is intended only for major block of navigation links. Unless the navigation is exclusive to that page, it should not be placed inside main. The reason for this restriction is because main elements should be unique to each page, whereas headers and footers are often shared throughout similar pages.  The HTML element represents the dominant content of the of a document. The main content area consists of content that is directly related to or expands upon the central topic of a d 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. Note: There must not be more than one element in a document. The element must NOT be a descendant of an , , , , or element.  vs The HTML element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions. The element defines section in a document. A begins a new "sectioning content" region, so it can have its own and/or. The HTML element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). The element specifies independent, self- contained content. Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user- submitted comment, an interactive widget or gadget, or any other independent item of content.  The HTML element represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call- out boxes. We can discover content in a sidebar on many websites, which is shown using the aside tag. HTML SEMANTIC EXAMPLES HTML SEMANTIC REAL EXAMPLE: TWITTER HTML SEMANTIC REAL EXAMPLE: DEV.TO SEMANTIC RULE OF THUMB If the contents of the element represent a standalone, atomic unit of content that makes sense syndicated as a standalone piece (e.g. a blog post or blog comment, or a newspaper article), the element would be a better choice. If the contents represent useful tangential information that works alongside the main content, but is not directly part of it (like related links, or an author bio), use an. If the contents represent the main content area of a document, use. If you are only using the element as a styling wrapper, use a. A rule of thumb is that a should logically appear in the outline of a document. WHY HTML SEMANTICS? Searchability Search engines will consider its contents as important keywords to influence the page's search rankings. Accessibility Screen readers can use it as a signpost to help visually impaired users navigate a page. Interoperability Finding blocks of meaningful code is significantly easier than searching through endless with or without semantic or namespaced classes. Help other programmers understand the structure of your webpage Maintainability Suggests to the developer the type of data that will be populated. Semantic naming mirrors proper custom element/component naming.  HTML TAGS: BLOCK TAGS, INLINE TAGS HTML tags HTML tag (either opening or closing) is used to mark the start or end of an element. HTML element is the collection of start tag, its attributes, an end tag Syntax of HTML element Not all elements require the end tag or closing tag to be present. These are referred as empty elements, self-closing elements or void elements HTML elements specifically divided into 3 subcategories: block level elements (block tags) inline level elements (inline tags) empty elements Syntax of empty element Example of Block Example of Inline Example of Empty Elements Elements Elements , , , , , , , , , , , , - , , , , , , , , , , , , , , , , , , , BLOCK LEVEL ELEMENTS A block-level element is an HTML element that takes up the full width of the element that contains it. Block-level elements take up all of the width available to them, as a result, they stack on top of each other, rather than lining up.  INLINE LEVEL ELEMENTS An inline element is an HTML element that only takes up the width that its content takes up. Inline block elements will only take up as much space as their content requires. As a result, they have enough space to form a single line and will not switch to a new line until they run out of space. Because of this behaviour, inline elements are well-suited to being used inside of block-level elements. IINLINE ELEMENTS VS BLOCK ELEMENTS Inline elements can begin within a line of the HTML Blocks cannot begin withina line of the HTML element Inline elements: Block elements: element and it never starts a new line for the HTML. and it always start the new line of the HTML. The width is define only till the tags of inline extends. The width is more than inline and is extended till the Inline elements can break among the lines. parent elements extends. Inline elements can be nested between block and inline Block elements cannot break among the lines. elements. Block elements cannot be nested between inline and Inline elements the content is filled and expanded both block elements. horizontally and vertically - the space allocated to inline Block elements expanded to fill the width of the elements are fully occupied. container vertically though it does not have any data Border and padding is accepted in inline elements. within the elements. Do not allow any line breaks in between elements. Block elements accepts only width, margins, border, height and padding. Inline elements accept only left and right margins - NOT top and bottom margin. Line break are formed in between the elements and files occupy maximum space allocated. Width and heights are not considered in inline elements. Block elements accept all the margins - left, right, top, bottom. Width and heights are considered and they expanded in terms of width, height and borders mainly. HTML DIV The element is a block-level element used almost exclusively to group other elements. The element's purpose becomes much clearer in CSS and JavaScript. By grouping items together, the element enables you to modify only specific areas of your webpage when you want to change their appearance or behaviour. HTML SPAN The element functions much like the element, but for inline elements, rather than block-level. HTML ID ATTRIBUTE The id attribute is a unique identifier which is used to specify the document. It is used by CSS and JavaScript to perform a certain task for a unique element. In CSS, the id attribute is written using # symbol followed by id. You cannot have more than one element with the same id in an HTML document. HTML CLASS ATTRIBUTE The class attribute is used to specify one or more class names for an HTML element. The class attribute can be used on any HTML element. The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name. The class name in CSS stylesheet using “.” symbol. HTML FORM Web forms are one of the main points of interaction between a user and a web site or application. Forms allow users to enter data, which is generally sent to a web server for processing and storage or used on the client-side to immediately update the interface in some way. A web form's HTML is made up of one or more form controls (sometimes called widgets), plus some additional elements to help structure the overall form — they are often referred to as HTML forms. The controls can be single or multi-line text fields, dropdown boxes, buttons, checkboxes, or radio buttons, and are mostly created using the element, although there are some other elements to learn about too. Form controls can also be programmed to enforce specific formats or values to be entered (form validation), and paired with text labels that describe their purpose to both sighted and blind users.  The element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc. The attribute is used to specify the data that is passed to and from the form. action: the action attribute defines the location (URL) where the form's collected data should be sent when it is submitted. method: the method attribute defines which HTTP method to send the data with (usually get or post). COMMON ELEMENTS REQUIRED TO DESIGN A FORM : is used to create an HTML form for user input. : is used to group related elements in a form. : defines a caption for the element. : defines a label for input collected by the elements. The for attribute of must be equal to the id attribute of the related element to bind them together. A label can also be bound to an element by placing the element inside the element. : specifies an input field where the user can enter data. It is the most important form element.  1 1 2 3 2 3 4 4  option & option Select input element presents options for the users from which they need to select one of them. With Select, users may have to scan a long list for selecting one of the values Datalist presents a list of suggested values to the associated input form (text) field and users are free to select one of those suggested values or type in their own value. With Datalist, the values are provided as hints and users isn't bound to those values. They are allows to key-in their own inputs.  option & option 1 2 1 2 DATE, DATETIME-LOCAL, TIME 1 1 2 2 3 4 3 4  CHECKBOX & RADIO BUTTON 1 Radio buttons let a user select ONLY ONE of a limited number of choices. Checkboxes let a user select ZERO or MORE options of a limited number of choices 2 1 2  EMAIL, PASSWORD, BUTTON 1 1 2 2 3 4 3 4 INPUT RESTRICTION REQUIRED, PLACEHOLDER ATTRIBUTE Required attribute specifies that an input field is required (must be filled out). Used * to show required field. The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format). RULE OF THUMB Before you begin writing the code, it's always a good idea to take a step back and consider your form. Creating a quick mockup will assist you in defining the correct set of data to request from your user. From a user experience (UX) perspective, it's critical to remember that the larger your form, the more likely you are to frustrate users and lose them. Keep it simple and focused: request only the information you absolutely require. THANK YOU TOPIC 2: HTML STRUCTURE PART I ISP465: INTRODUCTION TO FRONT- END DEVELOPMENT OUTLINES ▪ HTML Structure: Text ▪ HTML Structure: List ▪ HTML Structure: Table ▪ HTML Structure: Links, Objects & Images HTML STRUCTURE: TEXT ▪ One of HTML's main jobs is to give text structure so that a browser can display an HTML document the way its developer intends. TEXT Headings show layers which is The tag is used to used for search engines while structure text in paragraphs can be inside one paragraphs within an heading to talk about a HTML document. specific subtopic within a general topic. TEXT : HEADING ▪ When the text is a title, use to. ▪ There are six heading elements: This is heading h1 This is heading h2 , , , , , and. This is heading h3 This is heading h4 ▪ Each element represents a different This is heading h5 level of content in the document. This is heading h6 ▪ represents the main heading ▪ represents subheadings ▪ represents sub-subheadings, and so on. TEXT : HEADING The default behavior of is bold and font size xx. It should be at the start of the text. It makes no sense to use this tag in the middle of a paragraph. to complements the list of tags used for titles. As these tags are sorted by levels it is correct to state that should be used in a text more important than the text and so on. TEXT : HEADING (RULE OF THUMB) Preferably, use only one per page—this is the top level heading, and all others are listed below it in the hierarchy. Make certain that the headings are used in the correct order in the hierarchy. Do not use elements to represent subheadings, then elements to represent sub- subheadings. You should aim to use no more than three of the six available heading levels per page, unless absolutely necessary. HTML STRUCTURE: LIST ▪ HTML lists allow web developers to group a set of related items in lists. LIST Unordered List Ordered List Other List In HTML Lists, tag list The tag is used to HTML support a description list starts with unordered list create an ordered list and where it is a list of terms, with a and list item starts with tag starts the list of description of each term. tag. items. It is also called as a It is also called as a The tag defines the description bulleted list because list numbered list because list list, the tag defines the term items are marked with items are marked with (name), and the tag describes bullets. numbers. each term LIST: UNORDERED LIST BULLET/DISC STYLE CIRCLE STYLE A default way of doing unordered list: Coffee Coffee Tea Tea Milk Milk NONE STYLE SQUARE STYLE Coffee Coffee Tea Tea Milk Milk  LIST: ORDERED LIST TYPE = 1 TYPE = A TYPE = a A default way of doing ordered list: