1.What is HTML?
HTML (HyperText Markup Language)is the most basic building block of the Web. It describes and defines the content of a webpage along with the basic layout of the webpage. Other technologies besides HTML are generally used to describe a webpage's appearance/presentation (CSS) or functionality/behavior (JavaScript).
- HTML is the standard markup language for creating Web pages.
- HTML stands for Hyper Text Markup Language
- HTML describes the structure of Web pages using markup
- HTML elements are the building blocks of HTML pages
- HTML elements are represented by tags
- HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
- Browsers do not display the HTML tags, but use them to render the content of the page
"HyperText" refers to links that connect webpages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.
HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements" such as<head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, and many others.
Tags in HTML are case insensitive. That is, they can be written in uppercase, lowercase, or a mixture. Example<title> tag can be written as <Title>,<TiTlE>or in any other way.
2.Elements in html
Below is a visualization of an HTML page structure:
<head>The HTML
<head>element provides general information (metadata) about the document, including its title and links to its scripts and style sheets.<head>would be as the first child of<html>element
The following is the example:
<html>
<head>
<title>Document title</title>
</head>
</html>
<title>It defines the title of the document, shown in a browser's title bar or on the page's tab. It can only contain text, and any tags contained within are ignored.A
<head>element that contains no other<title>element.
The following is the example:
<title>Awesome page title</title>
<body>
The HTML <body> Element represents the content of an HTML document. There can be only one <body> element in a document.
<header>
The HTML <header>element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also other elements like a logo, a search form, an author name, and so on.The <header>element is not sectioning content and therefore does not introduce a new section in the outline. That said, a<header> element is intended to usually contain the surrounding section's heading (an h1–h6 element), but this is not required.
The following is the example:
<h1>Forest elephants</h1>
<p>In this section, we discuss the lesser known forest elephants.
...this section continues...
<h2>Habitat</h2>
<p>Forest elephants do not live in trees but among them.
...this subsection continues...
<h2>Diet</h2>
<h1>Mongolian gerbils</h1>
<footer>
The HTML <footer> element represents a footer for its nearest sectioning content or sectioning root element. A footer typically contains information about the author of the section, copyright data or links to related documents.
The following is the example:
<footer>
Some copyright info or perhaps some author
info for an <article>?
</footer>
</FOOTER>
</ARTICLE>
</MAIN>
<FOOTER> <!-- site wide footer -->
<NAV>
<P><A HREF="/credits.html">Credits</A> — <A HREF="/tos.html">Terms of Service</A> — <A HREF="/index.html">Blog Index</A></P>
</NAV>
<P>Copyright © 2009 Gordon Freeman</P>
</FOOTER>
<article>
The HTML <article> element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry.
The following is the example:
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9 puvlish from 14th,MARCH 2011.....</p>
</article>
<p>
The HTML <p> element represents a paragraph of text. Paragraphs are usually represented in visual media as blocks of text that are separated from adjacent blocks by vertical blank space and/or first-line indentation.
In html,we can do it like this
<p>
This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.
</p>
We can define the format of <p>in css
p { background-color: #8ABB55; }
<div>
The HTML Content Division element (<div>) is the generic container for flow content. It has no effect on the content or layout until styled using CSS. As a "pure" container, the
<img>
The HTML <img> element embeds an image into the document.It support the following dormat:JPEG,GIF,PNG,APNG,SVG,BMP,BMP ICO
The following is the example:
- Example 1: Alternative text
<img src="mdn-logo-sm.png" alt="MDN">
- Example 2: Image link
<a href="/">MDN<img src="mdn-logo-sm.png" alt="MDN"></a> - Example 3: Using the srcset and sizes attributes
<img src="clock-demo-thumb-200.png" alt="Clock" srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w" sizes="(max-width: 600px) 200px, 50vw">
3.Practice
The following pageis my basic practice about about myself, and I attach the html code below
<!DOCTYPE html>
<html>
<head>
<!--don't modify the next three lines-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--don't modify the above three lines-->
<!--you can insert the name of your page here-->
<title>Bob Wu'sFabacademy 2018</title>
<!-- Bootstrap core CSS: don't modify the next three lines -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!--don't modify the above three lines-->
<!-- Custom styles for this template -->
<link href="bootstrap/media/theme.css" rel="stylesheet">
<!-- Fabo Academy X theme -->
<link href="bootstrap/css/faboacademyx.css" rel="stylesheet">
<!--don't modify the next three lines-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--don't modify the above three lines-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
</head>
<body>
<!-- beginning of navigation bar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <!-- this button is needed to show the menu icon when using small screens, it makes use of the responsiveness features within bootstrap -->
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Aboutme.html">Bob Wu's FAB 2018</a>
</div>
<div id="navbar" class="navbar-collapse collapse"> <!-- this div makes your navbar disappear and show the menu icon when using small screens -->
<ul class="nav navbar-nav"> <!-- this list has all the elements of your menu -->
<li><a href="test.html">Test</a></li>
<li><a href="Fabclass">Classes</a></li>
<li><a href="Finialproject.html">Final Project</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">About<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="Fablabbasic.html">Fablab academy</a></li>
<li><a href="Aboutme.html">Bob Wu</a></li>
</ul>
</li>
<li><a href="FAQ.html">FAQ</a></li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-12">
<h1>Hello, everyone, Nice to meet you,It's a honor of me to join in the amazing community. </h1>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="http://a360.co/2ycH6Na"><img src="image/bob.jpg" width="100%" ></a>
<div class="caption">
</div>
</div>
</div> <!-- end of the column -->
<div class="col-md-8">
<br>
<p>This is Bob Wu ,who come from <a href="http://www.nexmaker.cn/">NexMaker</a>, a local makersapce in NingBo China.We lauched the makerspace from 2014 to 2016. <a href="http://www.nexmaker.cn/">NexMaker</a> is gathering the Makers and anyone who is interested in Makers Movement together, to share, to discuss, to work together, to be Fun. We are sharing and discussing Hi-Tech Innovation, Hardware and Industrial design, Internet of Things, Cloud Application, Startups and Entrepreneurs, 3D printer, etc with the Makers in Ningbo right now.But we stoped it because of our aim and external factors.</p>
<p>In future we would build our local lab and gather supply chain resource to support maker project from idea to prototype.</p>
<p>I think the system learn of Fablab will improve our mind in hardware innvation and give us guide to in maker movement.</p>
We also have a passion team do some maker project for example Henosv,sharkboard.
<br>
I am eagle to make hardware and now I focus on digital manufacture. So during this fab academy , I would do some basic research about
<a href="Finialproject.html">DM machine</a>, which can print conductor and insulator together.
Looking to hear more from you
<a href="mailto:douboy@nexmaker.com">Email</a>
</div> <!-- end of the column -->
</body>
</html>