4_5926925443935505826.pptx
- 2. Unit-3 Web design What is Web Design? Web design refers to the design of websites that are displayed on the internet. It usually refers to the user experience aspects of website development rather than software development. Web design used to be focused on designing websites for desktop browsers; however, since the mid-2010s, design for mobile and tablet browsers has become ever-increasingly important. Two of the most common methods for designing websites that work well both on desktop and mobile are responsive and adaptive design.
- 3. Cont. • Responsive design: content moves dynamically depending on screen size. utilizes one layout and adjusts the content, navigation, and elements of the page to fit the user’s screen. The responsive design will reconfigure all design elements whether it’s viewed on a desktop, laptop, tablet, or mobile phone. • Adaptive design: the website content is fixed in layout sizes that match common screen sizes. different fixed layouts are created that adapt to the users screen size. As opposed to the more fluid responsive approach, adaptive design employs multiple sizes of a fixed design. Best Web Programming Languages • JavaScript .React • Java .Angular • HTML .PHP • CSS .Bootstrap
- 4. HTML and CSS • HTML is the standard markup language for Web pages. What is HTML? • HTML stands for Hyper Text Markup Language • HTML is the standard markup language for creating Web pages • HTML describes the structure of a Web page • HTML consists of a series of elements • HTML elements tell the browser how to display the content • HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.
- 5. Cont. • HTML Elements • The <!DOCTYPE html> declaration defines that this document is an HTML5 document. • The <html> element is the root element of an HTML page. • The <head> element contains meta information about the HTML page. • The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab). • The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. • The <h1> element defines a large heading. • The <p> element defines a paragraph. An HTML element is defined by a start tag, some content, and an end tag: <tagname>Content goes here...</tagname> <h1 title="I'm a tooltip">My First Heading</h1> <p>My first paragraph.</p>
- 6. Cont. HTML Documents All HTML documents must start with a document type declaration:<!DOCTYPE html> The HTML document itself begins with <html> and ends with </html> The visible part of the HTML document is between <body> and </body> A Simple HTML Document <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
- 7. .cont. • HTML Headings HTML headings are defined with the <h1> to <h6> tags. <h1 > defines the most important heading. <h6> defines the least important heading. • HTML Paragraphs HTML paragraphs are defined with the <p> tag. • HTML Links HTML links are defined with the <a> tag. <a href=“web site name or path. File type"> This is a link </a> The link's destination is specified in the href attribute. • HTML Images HTML images are defined with the <img> tag. <img src=“path.jpg" alt=“image is not available" width="104" height="142"> The source file src alternative text alt , width and height are provided as attributes. • Empty HTML Elements The <br> tag defines a line break, and is an empty element without a closing tag
- 8. HTML Styles • The HTML style attribute is used to add styles to an element, such as color, font, size, and more. <tagname style="property:value;"> • Background Color <body style="background-color:powderblue;"> <h1 style="background-color:blue;"> This is a heading </h1> <p style="background-color:tomato;"> This is a paragraph. </p> • Fonts The CSS font-family property defines the font to be used for an HTML element. <h1 style="font-family:verdana;"> This is a heading </h1> <p style="font-family:courier;"> This is a paragraph. </p> • Text Size <h1 style="font-size:300%;"> This is a heading </h1> <p style="font-size:160%;"> This is a paragraph. </p>
- 9. .cont. • Text Alignment The CSS text-align property defines the horizontal text alignment for an HTML element <h1 style="text-align:center;"> Centered Heading </h1> <p style="text-align:center;"> Centered paragraph. </p> • Chapter Summary • Use the style attribute for styling HTML elements • Use background-color for background color • Use color for text colors • Use font-family for text fonts • Use font-size for text sizes • Use text-align for text alignment