banner



Home  ›  How To Create A Website Using Html Css And Bootstrap

How To Create A Website Using Html Css And Bootstrap

Written By Saturday, December 4, 2021 Add Comment Edit
"> 
              <!DOCTYPE html>                            <              html              >              <!-- Head section holds info for the browser. -->              <              head              >              </              head              >              <!-- Body holds the content of the page. -->              <              body              >              </              body              >              </              html              >
As a note: Anything within the <!-- blah --> tags are comments and the computer doesn't read them -- they're for human use.
Try using them to organize your code and keep track of your tags!

Inside our <head> section, let's add some preliminary text so the computer knows the title of our page, its encoding type, how it should be styled (i.e. a link to our CSS file), and links to the Bootstrap files we'll use:

              <!-- Our page's title and custom styling file. -->              <              title              >Sample Page</              title              >              <              link              rel="stylesheet"              href="index.css"              type="text/css">              <!-- Info for the browser to decode our HTML code. -->              <              meta              charset="utf-8" />              <              meta              http-equiv="X-UA-Compatible"              content="IE=edge">              <              meta              name="viewport"              content="width=device-width, initial-scale=1">              <!-- Bootstrap files -->              <              link              rel="stylesheet"              href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"              integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"              crossorigin="anonymous">              <              script              src="https://code.jquery.com/jquery-3.2.1.slim.min.js"              integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"              crossorigin="anonymous">              </              script              >              <              script              src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"              integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"              crossorigin="anonymous">              </              script              >              <              script              src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"              integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"              crossorigin="anonymous">              </              script              >

Step 1b: Use Bootstrap to plan layout

Bootstrap has regular HTML tags like div, span, etc. but uses built-in "classes," which are basically types of components. If we're using the metaphor from before, these are the structures pre-built by our carpenter.

For our website, we'll have a navbar at the top, then all our content in a big column container in the middle of the screen. Within that column, we'll have rows, which each constitute a section of the page, such as description, bio, etc.

Let's set up the layout using Bootstrap <div> classes, which just hold divisions of our page. HTML loads pretty logically (i.e. things at the top of the code load first, and things inside a <div> will be nested inside the component). Don't forget closing tags!

Since the stuff is content, we put it in our <body> section:

Related Posts

", numPosts: 8, titleLength: "auto", thumbnailWidth: 159, thumbnailHeight: 89, noImage: "//1.bp.blogspot.com/-aR5w9KXuWGU/XhSDNRAVuhI/AAAAAAAAHG8/dLxcaZxSgh0v85JG0mWRMQyEwqMgpL1_gCLcBGAsYHQ/w159-h89-c/no-image.jpg", containerId: "related-post-8639713374084186257", newTabLink: false, moreText: "Read More", widgetStyle: 3, callBack: function() {} };

0 Response to "How To Create A Website Using Html Css And Bootstrap"

Post a Comment

Subscribe to: Post Comments (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel