ask mattrab

24 Computer -- Web Technology I

Practice #1: Try to recreate the site shown in the image using HTML and CSS. (Not in syllabus, Only for practice)

Practice #1: Try to recreate the site shown in the image using HTML and CSS. (Not in syllabus, Only for practice)

1 Answers

542 Views

Note: be sure to name the imgs, html & css properly and download the images from githhub for proper viewing of the website


Githhub link:   https://github.com/Samyak354/mattrab_assgn


Final Result:-




HTML:

<html>   <head>      <title>Wyebsyte</title>      <link rel="stylesheet" href="bruhhh.css">   </head>
   <body>      <div class="tht_black_thingy">         <div class="container_items">HOME</div>              <div class="container_items">BAND</div>         <div class="container_items">TOUR</div>         <div class="container_items">CONTACT</div>         <div class="container_items">            <select name="jkjk" id="drop_down">            <option value="MORE">MORE</option>            </select>         </div>                   <div class="container_items" id="mag_glass">&nbsp;            <img src="capture.png" alt="image" height="30px" width="30px">         </div>      </div>            <center>      <p id="band"><br><br>THE BAND</p>            <P id="sub_titol"><br><br>We love music</P>
      <p><br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac tortor non quam dapibus ultrices vitae vitae nisi. Aenean condimentum tincidunt massa id vehicula. Praesent sapien nunc, varius sit amet accumsan sit amet, placerat ac sapien. Nam in tortor tincidunt est ornare rutrum commodo at dolor. Aliquam sodales, mi sagittis lacinia fermentum, eros turpis auctor augue, ut tincidunt lacus nisi sollicitudin dui. Duis non ultricies nibh, et pulvinar lorem. Sed urna ante, porttitor ut rutrum vel, suscipit sed odio. Curabitur sed vulputate nisi. Nam orci est, ultricies vel mauris sit amet, maximus cursus dolor. Nunc blandit sodales sem, maximus vestibulum justo suscipit id. Curabitur laoreet nisi id arcu interdum posuere ut non mi. Vivamus lobortis mattis risus, vel lacinia justo efficitur tincidunt. Donec eget sagittis lacus. Duis at justo suscipit nisl aliquam ullamcorper dignissim id arcu. Cras sit amet erat in risus gravida luctus at non dolor. Morbi vitae magna vitae diam commodo fringilla at ut augue.</p>
            <div class="img_and_headers">
         <div class="sub_class">            <p>Name</p>            <img src="../mattrab copy/Capture1.PNG" width="163px" height="162px" id="img">         </div>                  <div class="sub_class">            <p>Name</p>             <img src="../mattrab copy/Capture1.PNG" width="163px" height="162px" id="img">         </div>         <div class="sub_class">               <p>Name</p>                <img src="../mattrab copy/Capture1.PNG" width="163px" height="162px" id="img">                         </div>

      </div>            </center>      <hr id="bottom">         </body>   </html>



CSS:

.tht_black_thingy {   font—family: Arial, Helvetica, sans-serif;   display: flex;   flex-direction: row;   flex-wrap: wrap;   background-color: #000000;   padding-bottom: 4px;}
.container_items {   color: #979797;   font—family: Arial, Helvetica, sans-serif;   font-size: 20px;   margin: 2px 15px;}
#drop_down {   background-color: #00000000;   color: #979797;   border: none;   font-size: 20px;}

body {   background-color: #ffffff;   color: #000000;}
#mag_glass {   position: absolute;   right: 0;}
.img_and_headers {   display: flex;   flex-direction: row;   margin: 10px 10px;   /* padding-left: 3vw;   margin-left: 3vw; */   justify-content: center;}
.sub_class {   margin: 10px 5vw;}
#img {   border-radius: 10px;}
#band {   font—family: Arial, Helvetica, sans-serif;   font-weight: 500;   font-size: 35px;   margin: 4px 0px;}
#sub_titol {   font—family: Arial, Helvetica, sans-serif;   font-style: italic;   color: #a2a2a2;   font-weight: 500;   font-size: 15px;   margin: 6px 0px;}
#bottom {   color: #000000;   background-color: #000000;   height: 20px;   margin: none;   border: none;   position: absolute;   bottom: -9;   left: 0;   right: 0;   /* padding: 10px; */}


More questions on Web Technology I

How to make a dynamic website ? What language should I learn?

First learn basic HTML, then CSS and responsive CSS for Static websites and thereafter JavaScript and PHP for dynamic pages. If you also want to learn jQuery for more better works learn it at the same time with JavaScript

What do you understand by the terms, "Website", "Web Page" and "Web Browser"?

Website

A website is a set of web pages that relate to each other which is linked by hyperlinks. Each website has its address known as URL (Uniform Resource Locator). All the websites on the internet form the World Wide Web (www.).


Web page

A web page is a hypertext document that can be seen from a web browser. If a web page is linked to other web pages then it is part of a website. It can contain links, audio, video, text, and pictures. It can be created by using HTML(Hypertext Markup...

What is HTML? Write the basic skeleton of HTML.

HTML

HTML(Hypertext Markup Language) is a markup language used to create web pages. It is a set of tags that are used to make the web pages and how the information is presented on the web pages. The web browser interprets the HTML codes and displays the contents of the web pages. It isn’t a programming language but rather a markup language meaning that it is a set of tags that tell the browser how to display the contents of web pages.

HTML was developed by Tim Berners Lee developed HTM in 1990...

What are HTML tags? Explain the types of HTML tags.

HTML is made up of different tags and attributes. The tag is an HTML command that shows the layout or displays the desired output of a whole or part of the Web page. HTML tag is bound by angular brackets ( < > ) that always opens with a < (less than ) sign and closes with a > (greater than) sign. It controls the appearance, layout and flow of the Web page.

A tag contains three parts: element (identification of tag), attribute and value.


HTML tags can be of two types:
  1. Paired Tags
  2. ...

Write the tags to:a. Change the body background of an HTML document.b. Add image to an HTML page.c. Add video to an HTML page.d. Add audio to an HTML page.

Tags to:-

a. Change the body background:

The body can be changed to a color, image or even a gradient:

Thebackground-colorproperty specifies the background color of an element.

Example

The background color of a page is set like this:

body{
background-color:lightblue;
}

With CSS, a color is most often specified by:

  • a valid color name - like "red"
  • a HEX value - like "#ff0000"
  • an RGB value - like "rgb(255,0,0)"



CSS background-image

Thebackground-imageproperty specifies an image to use as the background...

What is a list? Explain its types with examples.

Lists is a HTML feature used to group together related pieces of information in a list so they are clearly associated with each other and easy to read.

Lists are good from a structural point of view as they help create a well-structured, more accessible, easy-to-maintain document. They are also useful because they provide specialized elements to which you can attach CSS styles.

The three list types

There are three list types in HTML:

  • unordered list— used to group a set of related items in no...

What is formatting? Explain any 4 formatting tags in HTML with examples.

HTML Formatting

HTML Formattingis a process of formatting text for better look and feel. HTML provides us ability to format text without using CSS. There are many formatting tags in HTML. These tags are used to make text bold, italicized, or underlined. There are almost 14 options available that how text appears in HTML and XHTML.

In HTML the formatting tags are divided into two categories:

  • Physical tag: These tags are used to provide the visual appearance to the text.
  • Logical tag: These tags...

What is a link? Write the various ways of linking a document with another.

The link is a feature in HTML that allows the user to connect two webpages or documents.Alinkhas two ends -- calledanchors-- and a direction. The link starts at the "source" anchor and points to the "destination" anchor, which may be any Web resource (e.g., an image, a video clip, a sound bite, a program, an HTML document, an element within an HTML document, etc.).

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...

What is difference between internal linking ad external linking?

Difference between External link and Internal link

1. Internal Link :
Internal links are hyperlinks that direct the readers to a target page on your website. Internal link is a link from one page to another page on the same domain.

Exampleare website navigation.

Advantages of good internal link are :

  • Internal link improves usability through anchor text.
  • Internal linking improves page rank.
  • Internal linking boots page views.
  • Internal link decreases the bounce rate.
  • Internal linking improves the...

Define table and write its tag.

he<table>tag defines an HTML table.

An HTML table consists of one<table>element and one or more<tr>,<th>, and<td>elements.

The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell.

An HTML table may also include<caption>,<colgroup>,<thead>,<tfoot>, and<tbody>elements.


Example

A simple HTML table, containing two columns and two rows:

<table>
<tr>
...

What is a form? Write a difference between cell spacing and cell padding.

An HTML form is used to collect user input. The user input is most often sent to a server for processing.

ExampleFirst name:

Last name:



The <form> Element

The HTML<form>element is used to create an HTML form for user input:

The<form>element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.



Difference between Cellpadding and Cellspacing

  • Cellpadding:

    Cellpadding specifies the space between the border of a...

What is CSS? Write its advantages.

CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, etc.


The following are the advantages of CSS

  • CSS saves time You can write CSS once and then reuse the same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many Web pages as you want.

  • Easy maintenance To make a global change, simply change the style, and all...

What is In-line CSS, Embedded CSS and External CSS?

Types of CSS (Cascading Style Sheet)

Cascading Style Sheet(CSS) is used to set the style in web pages that contain HTML elements. It sets the background color, font-size, font—family, color, … etc property of elements on a web page.
There are three types of CSS which are given below:

  • Inline CSS
  • Internal or Embedded CSS
  • External CSS

Inline CSS:Inline CSS contains the CSS property in the body section attached with element is known as inline CSS. This kind of style is specified within an HTML tag...

Practice #2: Try to recreate the design shown in the image using HTML and CSS. (Not in syllabus, Only for practice)

Here is the html, css and js (u gotta flex u can use js when u can) codes for recreating ths website:-

For viewing codes in a clean and a programmer way, heres the link for githhub:

https://github.com/Samyak354/tht_calendar_thingy.github.io


Resources used (maybe useful for you in future projects):-

color picker chrome extension

google (that one time i had to search how to center a div)


Final Result (Close Enough Right??) :






This is gonna be a mess but here is the codes u can ctrl+c and ctrl + v (but...

Who is responsible for the looks of the page you're looking at right now and who's responsible for the way the page responds to your clicks?

It is the front-end developer who's responsible for everything that is pleasing to your eyes. The way the site looks, the way effects appear on hovering your cursor is all due to the work of a front-end developer.

It is the back-end developer who's responsible for the code that works on handling the information received, managing data-bases and so much more.

1.     What is the full form of HTML?a. Hypertext Markup Languageb. High-Level Markup Languagec. Hypertext Transfer Languaged. High-Level Transfer Language 2.     What is the purpose of CSS in web ...

1.     What is the full form of HTML?a. Hypertext Markup Languageb. High-Level Markup Languagec. Hypertext Transfer Languaged. High-Level Transfer Language 2.     What is the purpose of CSS in web ...

Close Open App