source code HTML#1
Source code HTML #1
<!DOCTYPE html>
<html>
<!--Phần đầu-->
<head>
<title>Web Design in 4 minutes</title> <!--tiêu đề-->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!--từ khóa-->
<link rel="stylesheet" type="text/css" href="style.css"> <!--liên kết với css-->
</head>
<!--Phần thân-->
<body>
<header id="header"> <!--phần đầu của body-->
<img id="logo" src="./img/web-design-in-4-minutes.png" alt="JT logo"> <!--chèn ảnh-->
<h1>Web Design in 4 minutes</h1> <!--chữ lớn-->
<p> <!--chứa đoạn văn bản-->
<a href="http://jgthms.com" target="_blank">by Jeremy Thomas</a>
</p>
</header>
<main> <!--nội dung chính-->
<section id="start"> <!--khối 1-->
<p>Let's say you have a product, a portfolio, or just an idea you want to share with everyone on your <em>own</em> website. Before you publish it on the internet, you want to make it look attractive, professional, or at least <em>decent</em> to look at.</p>
<p>What is the <a href="#content">first thing</a> you need to work on?</p>
</section>
<section id="content"> <!--khối 2-->
<h2>Content</h2> <!--chữ cỡ lớn-->
<p>The purpose of <strong>design</strong><!--chữ in đậm đen--> is to enhance the presentation of the content it's applied to. It might sound obvious, but content being the <strong>primary</strong> element of a website, it should not be established as an afterthought.</p>
<p>Written content, like the paragraph you're currently reading, makes up for more than 90% of the Web. Styling this textual content will go a long way.</p>
<p>Let's assume you've already finalised the content you want to publish and just created an empty <code>style.css</code><!--xác định code--> file, what is the <a href="#centering">first rule</a><!--tạo link--> you can write?</p>
</section>
<section id="centering"> <!--khối 3-->
<h2>Centering</h2>
<p>Long lines of text can be hard to parse, and thus hard to <strong>read</strong>. Setting a limit of characters per line greatly enhances the readability and appeal of a wall of text.</p>
<pre><span class="selector">body</span> {
<span class="attribute">margin</span>: <span class="number">0</span> auto;
<span class="attribute">max-width</span>: <span class="number">50</span><span class="unit">em</span>;
}</pre>
<p>After styling the text <em>blocks</em>, what about styling the <a href="#font-family">text itself</a>?</p>
</section>
<section id="font-family"> <!--khối 4-->
<h2>Font family</h2>
<p>The browser's font defaults to <code>"Times"</code>, which can look unappealing (mostly because it is the "unstyled" font). Switching to a <strong>sans-serif</strong> font like <code>"Helvetica"</code> or <code>"Arial"</code> can vastly improve the look of your page.</p>
<pre><span class="selector">body</span> {
<span class="attribute">font-family</span>: <span class="string">"Helvetica"</span>, <span class="string">"Arial"</span>, sans-serif;
}</pre>
<p><em>If you want to stick with a serif font, try <code>"Georgia"</code>.</em></p>
<p>While this makes the text more <em>appealing</em>, let's also make it <a href="#spacing">more readable</a>.</p>
</section>
<section id="spacing"> <!--khối 5-->
<h2>Spacing</h2>
<p>When a page looks "broken" to a user, it's usually a <strong>spacing</strong> issue. Providing space both <em>around</em> and <em>within</em> your content can increase the appeal of your page.</p>
<pre><span class="selector">body</span> {
<span class="attribute">line-height</span>: <span class="number">1.5</span>;
<span class="attribute">padding</span>: <span class="number">4</span><span class="unit">em</span> <span class="number">1</span><span class="unit">em</span>;
}
<span class="selector">h2</span> {
<span class="attribute">margin-top</span>: <span class="number">1</span><span class="unit">em</span>;
<span class="attribute">padding-top</span>: <span class="number">1</span><span class="unit">em</span>;
}</pre>
<p>While the layout has greatly improved so far, let's apply more <a href="#color-contrast">subtle changes</a>.</p>
</section>
<section id="color-contrast"> <!--khối 6-->
<h2>Color & contrast</h2>
<p>Black text on a white background can be harsh on the eyes. Opting for a softer shade of black for body text makes the page more <strong>comfortable</strong> to read.</p>
<pre><span class="selector">body</span> {
<span class="attribute">color</span>: <span class="number">#555</span>;
}</pre>
<p>And in order to keep a decent level of <strong>contrast</strong>, let's pick a darker shade for <strong>important</strong> words</p>
<pre><span class="selector">h1</span>,
<span class="selector">h2</span>,
<span class="selector">strong</span> {
<span class="attribute">color</span>: <span class="number">#333</span>;
}</pre>
<p>While most of the page has been improved visually, some elements (like the code snippets) still seem <a href="#balance">out of place</a>.</p>
</section>
<section id="balance"> <!--khối 7-->
<h2>Balance</h2>
<p>It only takes a few additional touches to correct the balance of the page:</p>
<pre><span class="selector">code</span>,
<span class="selector">pre</span> {
<span class="attribute">background</span>: <span class="number">#eee</span>;
}
<span class="selector">code</span> {
<span class="attribute">padding</span>: <span class="number">2</span>px <span class="number">4</span>px;
<span class="attribute">vertical-align</span>: text-bottom;
}
<span class="selector">pre</span> {
<span class="attribute">padding</span>: <span class="number">1</span>em;
}</pre>
<p>At this point, you might want to make your page stand out and give it <a href="#primary-color">identity</a>.</p>
</section>
<section id="primary-color"> <!--khối 8-->
<h2>Primary color</h2>
<p>Most brands have a <strong>primary color</strong> that acts as a visual accent. On a website, this accent can be used to provide emphasis on interactive elements, like <strong>links</strong>.</p>
<pre><span class="selector">a</span> {
<span class="attribute">color</span>: <span class="number">#e81c4f</span>;
}</pre>
<p>But to keep the balance, we will need some <a href="#secondary-colors">additional colors</a>.</p>
</section>
<section id="secondary-colors"> <!--khối 9-->
<h2>Secondary colors</h2>
<p>The accent color can be complemented with more <em>subtle</em> shades, to be used on borders, backgrounds, or even the body text.</p>
<pre><span class="selector">body</span> {
<span class="attribute">color</span>: <span class="number">#566b78</span>;
}
<span class="selector">code</span>,
<span class="selector">pre</span> {
<span class="attribute">background</span>: <span class="number">#f5f7f9</span>;
<span class="attribute">border-bottom</span>: <span class="number">1</span><span class="unit">px</span> solid <span class="number">#d8dee9</span>;
<span class="attribute">color</span>: <span class="number">#a7adba</span>;
}
<span class="selector">pre</span> {
<span class="attribute">border-left</span>: <span class="number">2</span><span class="unit">px</span> solid <span class="number">#69c</span>;
}</pre>
<p>Having changed the shades, why not change the <a href="#custom-font">shapes</a>...</p>
</section>
<section id="custom-font"> <!--khối 10-->
<h2>Custom font</h2>
<p>Since text is the main content of a webpage, using a <strong>custom font</strong> gives the page even more noticeable identity.</p>
<p>While you can embed your own webfont or use an online service like <a href="https://typekit.com" target="_blank">Typekit</a>, let's use <code>"Roboto"</code> from the free <a href="https://fonts.google.com" target="_blank">Google Fonts</a> service:</p>
<pre><span class="keyword">@import</span> <span class="string">'https://fonts.googleapis.com/css?family=Roboto:300,400,500'</span>;
<span class="selector">body</span> {
<span class="attribute">font-family</span>: <span class="string">"Roboto"</span>, <span class="string">"Helvetica"</span>, <span class="string">"Arial"</span>, sans-serif;
}</pre>
<p>After enhancing your identity through <em>text</em>, how about adding a <a href="#images">thousand words</a>...</p>
</section>
<section id="images"> <!--khối 11-->
<h2>
<img src="./img/images.png" alt="Spongebob rainbow meme saying 'Images'">
</h2>
<p>Graphics and icons can be used either as ornaments to support your content, or actively take part in the message you want to convey.</p>
<p>Let's enhance our header with a nice <strong>background image</strong> from <a href="https://unsplash.com/photos/qH36EgNjPJY" target="_blank">Unsplash</a></p>
<pre><span class="selector">header</span> {
<span class="attribute">background-color</span>: <span class="number">#263d36</span>;
<span class="attribute">background-image</span>: url(<span class="string">"header.jpg"</span>);
<span class="attribute">background-position</span>: center top;
<span class="attribute">background-repeat</span>: no-repeat;
<span class="attribute">background-size</span>: cover;
<span class="attribute">line-height</span>: <span class="number">1.2</span>;
<span class="attribute">padding</span>: <span class="number">10</span><span class="unit">vw</span> <span class="number">2</span><span class="unit">em</span>;
<span class="attribute">text-align</span>: center;
}</pre>
<p>Let's also add a <strong>logo</strong></p>
<pre><span class="selector">header img</span> {
<span class="attribute">display</span>: inline-block;
<span class="attribute">height</span>: <span class="number">120</span><span class="unit">px</span>;
<span class="attribute">vertical-align</span>: top;
<span class="attribute">width</span>: <span class="number">120</span><span class="unit">px</span>;
}</pre>
<p>Let's take that opportunity to enhance the text styles.</p>
<pre><span class="selector">header h1</span> {
<span class="attribute">color</span>: white;
<span class="attribute">font-size</span>: <span class="number">2.5</span><span class="unit">em</span>;
<span class="attribute">font-weight</span>: <span class="number">300</span>;
}
<span class="selector">header a</span> {
<span class="attribute">border</span>: <span class="number">1</span><span class="unit">px</span> solid <span class="number">#e81c4f</span>;
<span class="attribute">border-radius</span>: <span class="number">290486</span><span class="unit">px</span>;
<span class="attribute">color</span>: white;
<span class="attribute">font-size</span>: <span class="number">0.6</span><span class="unit">em</span>;
<span class="attribute">letter-spacing</span>: <span class="number">0.2</span><span class="unit">em</span>;
<span class="attribute">padding</span>: <span class="number">1</span><span class="unit">em</span> <span class="number">2</span><span class="unit">em</span>;
<span class="attribute">text-transform</span>: uppercase;
<span class="attribute">text-decoration</span>: none;
<span class="attribute">transition</span>: none <span class="number">200</span><span class="unit">ms</span> ease-out;
<span class="attribute">transition-property</span>: color, background;
}
<span class="selector">header a:hover</span> {
<span class="attribute">background</span>: <span class="number">#e81c4f</span>;
<span class="attribute">color</span>: white;
}</pre>
<p><a href="#header">And voilà</a>!</p>
<p>We've designed a decent page in just a few minutes, following basic principles of web design. There's only <a href="#share">one last thing</a> left to do...</p>
</section>
<section id="share"> <!--khối 12-->
<h2>Share the love!</h2>
<nav class="buttons">
<a class="button github" href="https://github.com/jgthms/web-design-in-4-minutes" target="_blank">
<em>Download on</em> <strong>GitHub</strong>
</a>
<a
class="button facebook"
href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fjgthms.com%2Fweb-design-in-4-minutes%2F"
rel="nofollow"
target="_blank"
>
<em>Share on</em> <strong>Facebook</strong>
</a>
<a
class="button twitter"
data-social-network="Twitter"
data-social-action="tweet"
data-social-target="http://jgthms.com/web-design-in-4-minutes/"
href="https://twitter.com/intent/tweet?text=Web%20Design%20in%204%20minutes&url=http%3A%2F%2Fjgthms.com%2Fweb-design-in-4-minutes%2F&via=jgthms"
rel="nofollow"
target="_blank"
>
<em>Share on</em> <strong>Twitter</strong>
</a>
</nav>
<h2>Learn how to design with code!</h2>
<p>
Here are the resources I wrote to help you learn CSS:
</p>
<nav class="resources">
<a class="resource-marksheet resource" href="http://marksheet.io" target="_blank">
<figure class="resource-icon">
<img src="./img/marksheet.png" alt="Logo of MarkSheet">
</figure>
<p>
<strong class="resource-name">MarkSheet</strong>
my <strong>free tutorial</strong> to learn HTML and CSS
</p>
</a>
<a class="resource-bulma resource" href="http://bulma.io" target="_blank">
<figure class="resource-icon">
<img src="./img/bulma.png" alt="Logo of Bulma">
</figure>
<p>
<strong class="resource-name">Bulma</strong>
my <strong>CSS framework</strong> based on Flexbox, so you can get started right away
</p>
</a>
<a class="resource-css-reference resource" href="http://cssreference.io" target="_blank">
<figure class="resource-icon">
<img src="./img/css-reference.png" alt="Logo of CSS Reference">
</figure>
<p>
<strong class="resource-name">CSS Reference</strong>
my <strong>visual guide</strong> to the most popular CSS properties
</p>
</a>
</nav>
<p>Thanks for reading!</p>
</section>
<footer> <!--phần cuối-->
<a class="button" href="https://twitter.com/jgthms" target="_blank">Made by <strong>@jgthms</strong></a>
</footer>
</main>
<!--Viết Javascript-->
<script type="text/javascript">
WebFontConfig = {
google: {
families: ['Roboto:300,400,500']
}
};
(function(d) {
var wf = d.createElement('script'), s = d.scripts[0];
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js';
s.parentNode.insertBefore(wf, s);
})(document);
</script>
</body>
</html>
Nhận xét
Đăng nhận xét