html.pdf

Introduction to Web Development and 5 ELEMENTS OF EFFECTIVE WEB DESIGN Getting to Know Html 1. A STRONG, BUT LIMITED, COLOR PALETTE - color schemes and color usage are very MODULE 1 LESSON 1:...

Introduction to Web Development and 5 ELEMENTS OF EFFECTIVE WEB DESIGN Getting to Know Html 1. A STRONG, BUT LIMITED, COLOR PALETTE - color schemes and color usage are very MODULE 1 LESSON 1: ELEMENTS AND important when it comes to modern web design PRINCIPLES OF A WEB DESIGN - a strong color palette will help create cohesiveness between everything your business UX puts out - is the overall experience of a person has using - simplifying the color scheme of your site a product (like your website), especially in makes it easier to focus, and this is why there terms of how easy or pleasing it is to use are only minimal color combinations in modern website designs YOUR DESIGN CAN AFFECT UX IN A 5 WAYS: 2. PLENTY OF WHITE SPACE 1. GUIDES THE READER’S EYE DOWN THE PAGE - is a term used for the amount of “empty” - a well-designed website will know how to keep space that acts as a buffer between all the the reader scrolling. elements on your page, including copy, sidebar, - breaking up content into smaller chunks, margins, etc. including visual hierarchy with banner images, - things should have room to breathe, if your fonts, and supporting elements, and utilizing website is crowded, it is very hard to direct the white space attention of your visitor’s eye 2. IT CAPTURES THEIR ATTENTION 3. CLEAN BACKEND CODING - what happens above the fold really does affect - modern website design element is one that the entire user experience you might not notice visually, but it is probably - important to include high-quality imagery, the most important when it comes to the good typography, and to be cohesive in your functionality of your site design - behind every website is a great deal of coding - clutter will only detract a visitor and force in the backend that will dictate how your them to click out of your site website performs - dedicating the extra time for clean backend 3. IT INCREASES FUNCTIONALITY coding will make it easier to write, read, and - how your website function is also a huge maintain how your site functions factor in overall user experience - responsive web design make sure that your 4. SEO-BOOSTING ELEMENTS website looks and functions the same no matter - a website should be designed for the user first, what device a website visitor is on it doesn't mean that SEO doesn't matter - a lot of these are invisible to the naked eye 4. IT PROMOTES PROFESSIONALISM AND CAN and also appear in the backend coding of your BUILD TRUST pages and posts - a great web design will present your business - design tricks like meta tags, title tags, heading as professional, clean, and often can help you tags, and other HTML coding go a long way in seem more reliable helping your site climb the ranks of Google's - proves that you know what you are doing and search engine you can present your business in a clear, professional manner 5. VALUABLE CALLS TO ACTION homepage feeling clean and organized, without - converting visitors into leads and customers is relying on a ton of text also very important to modern website design - websites are meant to connect you with the 8. SHORT PRODUCT OR FEATURE VIDEOS people who are interested in your content, - in addition to background videos, companies products, and services are also beginning to use short product or feature videos to highlight a specific use case. 8 MODERN WEBSITE DESIGN ELEMENTS AND These short videos are great at bringing your TRENDS solution to life, while not overwhelming the visitor with a long experience that they must sit 1. UNIQUE & LARGELY TYPOGRAPHY through - companies have a particular font or typography that they use to help their PRINCIPLES OF EFFECTIVE WEB DESIGN customers immediately identify them versus - an effective website design should fulfill its their competitors intended function by conveying its particular - designers have received a larger selection of message whilst simultaneously engaging the fonts to choose from, making it easier for visitor brands to more accurately express themselves through typography 6 SEVERAL FACTORS TO CONTRIBUTE GOOD WEBSITE DESIGN 2. LARGE & RESPONSIVENESS HERO IMAGES 1. Consistency - large images such as this one do away with the 2. Colours concept of above and below the fold 3. Typography 4. Imagery 3. BACKGROUND VIDEOS 5. Simplicity - videos that automatically play in the 6. Functionality background can add a lot to a page WEBSITE PURPOSE 4. SEMI-FLAT DESIGN - there are many different purposes that - flat design is any element that does not websites may have but there are core purposes include or give the perception of three common to all websites: dimensions, such as shadows 1. Describing Expertise 2. Building Your Reputation 5. HAMBURGER MENUS 3. Generating Leads - most websites you come in contact with have 4. Sales and After Care a long menu of options to choose from - advantage of this is that the menu can take SIMPLICITY the visitor directly to where they want to go - is the best way to go when considering the user experience and the usability of your 6. GIANT PRODUCT IMAGES website. Below are ways to achieve simplicity - there is a large featured image at the top of through design this page, and as you scroll down the page there 1. Colour are additional in-depth product images 2. Type 3. Imagery 7. CARD DESIGN - by breaking up different pieces of content into NAVIGATION cards, users can pick and choose which articles - is the way finding system used on websites they want to expand. This helps to keep the where visitors interact and find what they are looking for. Website navigation is key to MODULE 1 LESSON 2: GETTING TO KNOW retaining visitors HTML F-SHAPED PATTERN READING WHAT IS HTML? - layout mimics our natural pattern of reading in - Hypertext Markup Language (HTML) is the the West (left to right and top to bottom) standard markup language for documents designed to be displayed in a web browser VISUAL HIERARCHY - it can be assisted by technologies such as - is the arrangement of elements is order of Cascading Style Sheets (CSS) and scripting importance languages such as JavaScript - this is done either by size, colour, imagery, contrast, typographically, whitespace, texture  HTML stands for HyperText Markup and style Language  HTML is the standard markup language CONTENT for creating Web pages - effective web design has both great design and  HTML describes the structure of a Web great content page - using compelling language great content can  HTML consists of a series of elements attract and influence visitors by converting  HTML elements tell the browser how to them into customers display the content GRID BASED LAYOUT WHAT IS AN HTML ELEMENT? - help to structure your design and keep your - is everything from the start to the end tag content organized Content goes here… - helps to align elements on the page and keep it clean EXAMPLE: - based layout arranges content into a clean My first heading rigid grid structure with columns, sections that My first paragraph line up and feel balanced and impose order and results in an aesthetically pleasing website WEB BROWSERS - is to read HTML documents and display them LOAD TIME correctly - waiting for a website to load will lose visitors - nearly half of web visitors expect a site to load in 2 seconds or less and they will potentially - declaration defines that this document is an leave a site that isn’t loaded within 3 seconds HTML document - optimizing image sizes will help load your site faster - element is the root element of an HTML page MOBILE FRIENDLY - more people are using their phones or other devices to browse the web - element contains meta information about the - it is important to consider building your HTML page website with a responsive layout where your website can adjust to different screens - element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)  - Right-click on an element (or a blank area), - element defines the document's body, and is a and choose "Inspect" or "Inspect Element" to container for all the visible contents, such as see what elements are made up of (you will see headings, paragraphs, images, hyperlinks, both the HTML and the CSS). tables, lists, etc - You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens - element defines a large heading HTML ATTRIBUTES - provide additional information about HTML elements - element defines a paragraph  all HTML elements can have attributes  attributes provides additional information about elements - no end tag  attributes are always specified in the - line breaks start tag  attributes usually come in name/value HTML DOCUMENTS pairs like: name = “value” - all HTML documents must start with a document type declaration: THE STYLE ATTRIBUTE - the HTML document itself begins with - is used to add styles to an element, such as and ends with color, font, size, and more - the visible part of the HTML document is between and THE LANG ATTRIBUTE - should always include the lang attribute inside HTML HEADINGS the tag, to declare the language of the - (defines the most important heading) to web page (defines the least important heading) - this is meant to assist search engines and browsers HTML LINKS - are defined with the tag THE TITLE ATTRIBUTE - link's destination is specified in the href - defines some extra information about an attribute element Ex. - the value of the title attribute will be displayed as a tooltip when you mouse over the element HTML IMAGES - are defined with the tag HEADINGS ARE IMPORTANT - the source file (src), alternative text (alt), - search engines use the headings to index the width, and height are provided as attributes structure and content of your web pages - users often skim a page by its headings. It is HOW TO VIEW HTML SOURCE? important to use headings to show the - Right-click in an HTML page and select "View document structure Page Source" (in Chrome) or "View Source" (in Edge), or similar in other browsers BIGGER HEADINGS - this will open a window containing the HTML - each HTML heading has a default size. source code of the page However, you can specify the size for any heading with the style attribute, using the CSS INSPECT AN HTML ELEMENT font-size property  - emphasized text - marked text HTML DISPLAY - smaller text - large or or small screens, and resized windows - deleted text will create different results - inserted text - subscript text HTML HORIZONTAL RULES - superscript text - > tag defines a thematic break in an HTML page, and is most often displayed as a HTML QUOTATION AND CITATION ELEMENTS horizontal rule - - element is used to separate content (or - defines a section that is quoted from another define a change) in an HTML page source - has no closing tag HTML FOR SHORT QUOTATIONS SOLUTION – THE HTML ELEMENT - defines a short quotation - element defines preformatted text - browsers normally insert quotation marks - displayed in a fixed-width font (usually around the quotation Courier), and it preserves both spaces and line breaks HTML FOR ABBREVIATONS - defines an abbreviation or an acronym, like BACKGROUND COLOR "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM" - the CSS background-color property defines the - can give useful information to browsers, background color for an HTML element translation systems and search-engines TEXT COLOR HTML FOR CONTACT INFORMATION - the CSS color property defines the text color - defines the contact information for the for an HTML element author/owner of a document or an article - usually renders in italic, and browsers will FONTS always add a line break before and after the - the CSS font-family property defines the font element to be used for an HTML element HTML FOR WORK TITLE TEXT SIZE - defines the title of a creative work (e.g. a - the CSS font-size property defines the text size book, a poem, a song, a movie, a painting, a for an HTML element sculpture, etc.) - usually renders in italic TEXT ALIGNMENT - the CSS text-align property defines the HTML FOR BI-DIRECTIONAL OVERRIDE horizontal text alignment for an HTML element - BDO stands for Bi-Directional Override - used to override the current text direction HTML TEXT FORMATTING - contains several elements for defining text HTML COMMENTS with a special meaning - are not displayed in the browser, but they can help document your HTML source code HTML FORMATTING ELEMENTS - bold text HTML COMMENT TAGS - important text - there is an exclamation point (!) in the start - italic text tag, but not in the end tag HTML COLORS - sample output from a computer - are specified with predefined color names, or program with RGB, HEX, HSL, RGBA, or HSLA values MODULE 2 LESSON 1: HTML LINK & IMAGE BORDER COLOR - set the color of borders HTML IMAGE MAPS EX. Style = “border 2px solid Tomato;” - you can create clickable areas on an image COLOR VALUES IMAGE MAPS - colors can also be specified using RGB values, - tag defines an image map HEX values, HSL values, RGBA values, and HSLA - an image map is an image with clickable areas values - the areas are defined with one or more tags ADDITIONAL FORMATTING - isolates a part of text that might be HOW DOES IT WORK? formatted in a different direction from other - idea behind an image map is that you should text outside it be able to perform different actions depending on where in the image you click - overrides the current text direction - to create an image map you need an image, and some HTML code that describes the - use to center the text format clickable areas - defines the title of a work THE IMAGE - the image is inserted using the tag - defines a piece of computer work - the only difference from other images is that you must add a usemap attribute - defines texts that has been deleted from a document USEMAP - the usemap value starts with a hash tag # - specifies a term that is going to be followed by the name of the image map, and is defined within the content used to create a relationship between the image and the image map - keyboard input CREATE IMAGE MAP - scalar measurement within a known - element is used to create an image range map, and is linked to the image by using the required name attribute - progress of task - the map attribute must have the same value as the ’s usemap attribute - to show in browsers that do not support ruby notations THE AREAS - clickable area is defined using element - an explanation/pronunciation of characters SHAPE - must define the shape of the clickable area, - ruby annotation and you can choose one of these values  rect – defines a rectangular region - no longer correct  circle – defines a circular region   poly – defines a polygonal region - each list item starts with the tag  default – defines the entire region - the list items will be marked with bullets (small black circles) by default note: you must also define some coordinates to be able to place the clickable area onto the ORDERED HTML LIST image - starts with the tag - each list item starts with the tag SHAPE = “rect” - the coordinates come in pairs, one for the x- HTML DESCRIPTION LIST axis and one for the y-axis - is a list of items, with a description of each item EXAMPLE: 34,44 - the tag defines the description list, the 34 – pixels from the left margin tag defines the term (name), and the 44 – pixels from the top tag describes each term ANOTHER EXAMPLE: 270, 350 HTML TABLE 270 – pixels from the left margin - table in HTML consists of table cells inside 350 – pixels from the top rows and columns - each table cell is defined by a and a SHAPE = “poly” tag - contains several coordinate points, which - everything between and are the creates a shape formed with straight lines (a content of the table cell polygon) TABLE HEADERS HTML LIST - sometimes you want your cells to be table - is a record of short pieces of information, such header cells as people’s names, usually written or printed - in those cases use the tag instead of the with a single thing on each line and ordered in a tag way that makes a particular thing easy to find - th stands for table header HTML LIST allow web developers to group a set HOW TO ADD A BORDER? of related items in lists - use the CSS border property on table, th, and td elements UNORDERED HTML LIST:  item COLLAPSED TABLE BORDERS  item - to avoid having double borders like in the  item example above, set the CSS border-collapse  item property to collapse - this will make the borders collapse into a AN ORDERED HTML LIST: single border  first item  second item HTML FORMS  third item - is used to collect user input - the user input is most often sent to a server  fourth item for processing - the html element is used to create an UNORDERED HTML LIST HTML form for user input - starts with the tag - element is a container for different types of input elements, such as text fields, checkboxes, radio buttons, submit buttons, and etc. CHECKBOXES - defines a checkbox - let a user select ZERO or more options of a limited number of choices THE ELEMENT - element is the most used form element - element can be displayed in many ways, depending on the type attribute THE ELEMENT - defines a drop-down list TEXT FIELDS - the defines a single-line input field for text input - element defines an option that can be selected - the first item in the drop-down list is selected - define a pre-selected option, add the selected attribute to the option THE ELEMENT - element defines a multi-line input field (a text area) THE ELEMENT - rows attribute specifies the visible number of - is useful for screen-reader users, because the lines in a text area screen-reader will read out loud the label when - cols attribute specifies the visible width of a the user focuses on the input element text area - for attribute of the tag should be equal to the id attribute of the element to bind them together RADIO BUTTONS - the defines a radio button - let a user select ONE of a limited number of choices THE ELEMENT - defines a clickable button INPUT TYPE BUTTON - defines a button INPUT TYPE COLOR THE and ELEMENT - is used for input fields - the element is used to group that should contain a color related data in a form - element defines a caption for the element INPUT TYPE DATE - is used for input fields that should contain a date - you can also use the min and max attributes to add restrictions to dates THE ELEMENT INPUT TYPE DATETIME-LOCAL - the element specifies a list of pre- -