UIUX 2023-2024 LM1 PDF

UNIT 1 - USER-CENTERED DESIGN PROCESS HTML Basic All HTML documents must start with a document type declaration The HTML document itself begins with and ends with. The visible part of the HTML document is between and. Content goes here... ………… ………… H...

UNIT 1 - USER-CENTERED DESIGN PROCESS HTML Basic All HTML documents must start with a document type declaration The HTML document itself begins with and ends with. The visible part of the HTML document is between and. Content goes here... ………… ………… HTML Headings HTML headings are defined with the to tags.  defines the most important heading  defines the least important heading HTML Paragraphs The HTML element defines a paragraph. HTML Style The HTML style attribute is used to add styles to an element, such as color, font, size, and more. The HTML style attribute has the following syntax: The property is a CSS property. The value is a CSS value. Background Color The CSS background-color property defines the background color for an HTML element. Text Color The CSS color property defines the text color for an HTML element. Fonts The CSS font-family property defines the font to be used for an HTML element. Text Size The CSS font-size property defines the text size for an HTML element. Text Alignment The CSS text-align property defines the horizontal text alignment for an HTML element. SAMPLE IMPLEMENTATION This is a heading This is a heading This is a heading Centered paragraph. This is a paragraph. OUTPUT HTML and Elements The HTML element defines bold text, without any extra importance. HTML and Elements The HTML element defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic. HTML Element The HTML element defines smaller text HTML Element The HTML element defines text that should be marked or highlighted HTML Element The HTML element defines text that has been deleted from a document. Browsers will usually strike a line through deleted text HTML Element The HTML element defines a text that has been inserted into a document.Browsers will usually underline inserted text HTML Element The HTML element defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O HTML Element The HTML element defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW HTML Images Syntax  The HTML tag is used to embed an image in a web page.  Images are not technically inserted into a web page; images are linked to web pages. The tag creates a holding space for the referenced image.  The tag is empty; it contains attributes only, and does not have a closing tag.  The tag has two required attributes: o src - Specifies the path to the image o alt - Specifies an alternate text for the image SYNTAX Image Size - Width and Height You can use the style attribute to specify the width and height of an image. Images in another Folder If you have your images in a sub-folder, you must include the folder name inthe src attribute: Animated Images HTML allows animated GIFs: Background Image on a HTML element To add a background image on an HTML element, use the HTML style attribute and theCSS background-image property Background - Image for specific division div { background-image: url('img_girl.jpg'); } Background - Image for entire page body { background-image: url('img_girl.jpg'); } Background Cover  If you want the background image to cover the entire element, you can setthe background-size property to cover.  Also, to make sure the entire element is always covered, set the background- attachment property to fix.   This way, the background image will cover the entire element, with no stretching body { background-image: url('img_girl.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } SAMPLE IMPLEMENTATION This is some smaller text. Do not forget to buy milk today. This is subscripted text. This is superscripted text. This text is emphasized This text is italic This text is bold This text is important! My favorite color is blue red. My favorite color is blue red. OUTPUT SAMPLE IMPLEMENTATION – BACKGROUND IMAGE div { background-image: url('img_girl.jpg');} body { background-image: url('img_girl.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover;} Background Image You can specify background images for any visible HTML element.In this example, the background image is specified for a div element.By default, the background-image will repeat itself in the direction(s) where it is smaller than the element where it is specified. (Try resizing the browser window to see how the background image behaves. OUTPUT  CSS Cascading Style Sheets (CSS) is used to format the layout of a webpage. With CSS, you can control the color, font and size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more! Using CSS CSS can be added to HTML documents in 3 ways:  Inline - by using the style attribute inside HTML elements  Internal - by using a element in the section  External - by using a element to link to an external CSS file Inline CSS  An inline CSS is used to apply a unique style to a single HTML element. An inline CSS uses the style attribute of an HTML element.  The following example sets the text color of the element to blue, and the text color of the element to red. A Blue Heading A red paragraph. Internal CSS An internal CSS is used to define a style for a single HTML page.  An internal CSS is defined in the section of an HTML page, within a element.  The following example sets the text color of ALL the elements (on that page) to blue, and the text color of ALL the elements to red. In addition, the page will be displayed with a "powderblue" background color body {background-color: powderblue;} h1 { color: blue; } p{ color: red; } This is a heading This is a paragraph External CSS  An external style sheet is used to define the style for many HTML pages.  To use an external style sheet, add a link to it in the section of each HTML page. This is a heading This is a paragraph. "styles.css": body { background-color: powderblue; } h1 { color: blue; } p{ color: red; } HTML Links - Hyperlinks  HTML links are hyperlinks.  You can click on a link and jump to another document.  When you move the mouse over a link, the mouse arrow will turn into a little hand. HTML Links - Syntax The HTML tag defines a hyperlink. It has the following syntax: link text HTML Links - The target attribute By default, the linked page will be displayed in the current browser window. To changethis, you must specify another target for the link. The target attribute specifies where to open the linked document.The target attribute can have one of the following values:  _self - Default. Opens the document in the same window/tab as it was clicked  _blank - Opens the document in a new window or tab  _parent - Opens the document in the parent frame  _top - Opens the document in the full body of the window Visit W3Schools! Absolute URLs AND Relative URLs Both examples above are using an absolute URL (a full web address) in the href attribute. A local link (a link to a page within the same website) is specified with a relative URL (without the https://www" part) Absolute URLs W3C Google Relative URLs HTML Images CSS Tutorial HTML Links - Use an Image as a Link To use an image as a link, just put the tag inside the tag Link to an Email Address Use mailto: inside the href attribute to create a link that opens the user's email program (to let them send a new email) Send email Button as a Link To use an HTML button as a link, you have to add some JavaScript code. JavaScript allows you to specify what happens at certain events, such as a click of a button HTML Tutorial Link Titles The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element. Visit our HTML Tutorial HTML Link Colors By default, a link will appear like this (in all browsers):  An unvisited link is underlined and blue  A visited link is underlined and purple  An active link is underlined and red a:link { color: green; background-color: transparent; text-decoration: none; } a:visited { color: pink; background-color: transparent; text-decoration: none; } a:hover { color: red; background-color: transparent; text-decoration: underline; } a:active { color: yellow; background-color: transparent; text-decoration: underline; } Link Buttons A link can also be styled as a button a:link, a:visited { background- color: #f44336;color: white; padding: 15px 25px; text-align: center; text- decoration: none; display: inline-block; } a:hover, a:active { background-color: red; } HTML Lists Unordered HTML List An unordered list starts with the tag. Each list item starts with the tag. The list items will be marked with bullets (small black circles) by default Coffee Tea Milk Ordered HTML List An ordered list starts with the tag. Each list item starts with the tag. The list items will be marked with numbers by default Coffee Tea Milk HTML Description Lists  HTML also supports description lists.  A description list is a list of terms, with a description of each term.  The tag defines the description list, tag defines the term (name) and tag describes each term Coffee - black hot drink Milk - white cold drink HTML Tables Table Cells Each table cell is defined by a and a tag. Table Rows Each table row starts with a and end with a tag. Table Headers Sometimes you want your cells to be headers, in those cases use the tag instead ofthe tag SYNTAX …… …… …… …… …… …… …… …… …… SAMPLE IMPLEMENTATION table, th, td { border:1px solid black; } A basic HTML table Company Contact Country Alfreds Futterkiste Maria Anders Germany  Centro comercial Moctezuma Francisco Chang Mexico To undestand the example better, we have added borders to the table. OUTPUT