Hacking for Designers #1: HTML

(Apologies to David Kadavy. I stole his title.
:P)

A note:“Hacking” among programmers just means you’re building something new, usually with code (but not always!). It’s not the kind where you just type a bunch and then say “I’m in.” Programmers refer to those people as “crackers,” and they don’t think very much of them; partly because it doesn’t actually take that much intelligence to break into stuff, and partly because what kind of uncreative programmer can’t find something better to do? Honestly.

So, you have the ability to make stuff look awesome
through design. It’s important! We need people like you, because otherwise technology would be a royal pain in the… side to use. Design is the reason Apple succeeds even though they don’t always have the best tech, and lack of it is why it took Linux forever to get off the ground despite being awesome at the code level.

But not being able to code at all
can be a bit… limiting. There’s a learning curve, yes, but fortunately the basics aren’t anywhere near as intimidating as they look. You’re definitely smart enough to pick this up. The main barrier is how scary and weird code can look to a neophyte.

The good news is that hacking is a lot more similar to your own field than you think! People draw a dichotomy between software devs and designers like they’re total opposite. Even geographically, our classes are on the opposite side of campus next to the physics and chemistry departments. But this is super weird! We have zero to do with science. They call us computer scientists, but that’s just to make us look fancy. What we are is makers, and the way we learn and the way we work are much more similar to painters and writers and… designers!

So, I’m whipping up a quick guide for you last minute. It’s really not going to take you long to pick this stuff up. Coding doesn’t get difficult until you’re deeper into the field, and if you get that far, you’re probably addicted so it doesn’t matter :wink:

This only covers web development. There are lots of other specialties in the field, but this is the one that’s most useful to you.

HTML

You’re gonna need this. Pure HTML is butt-ugly; you need CSS to do any kind of layouts or colors. But you can’t learn CSS until you learn some basic HTML, because you need something to style. It’d be like trying to format a book without the actual text.

HTML is for content and structure, CSS is for layout and styling. Don’t fall into the trap of using tables for layout. People did that a lot in the 90s, and it makes your site ridiculously difficult to code and maintain. Also it’s likely to play merry hells with responsive design these days. Fortunately, there are a few newer tools that fix this problem and let you use grid layouts without getting into the whole

mess. We’ll get there. HTML first. Just wanted to warn you off this pitfall in case you see it somewhere else.

First off, you’re gonna need a code editor. Right now, the hacker favorite for web dev is Brackets. It’s free, it’s open-source, and you can download it here.

Got that?

Okay, so here’s the basic skeleton for an HTML5 project. Copypaste at will; I’ll explain what all this does in a minute.

    
        Welcome to Website!
        
        
    
    
    

If you save this as an HTML file and run it in Brackets’ live preview (use the lightning bolt button on the top of the right sidebar), you’re going to see a blank white page. That’s normal! You should also see “Welcome to Website!” in the tab’s label in your browser. That’s because I set it as a placeholder title; you can put whatever you want in there.

About those indents–they’re not strictly necessary in HTML, but they make your code way easier to read! You *could* put everything on one line if you really wanted, but it would be a pain. CSS is pickier about whitespace (indentations, spaces, etc), if I remember right.

A standard indent is four spaces. However, Brackets does this neat little trick where it turns a tab keypress into four spaces, so you don’t have to wear your thumbs out!

I think the only thing I still haven’t explained is the thing. That just tells the browser you’re using HTML5. Nothing weird!

Adding Stuff: How Elements Work

Most of your other code is going to go in between the tags. That’s where you put all your content. is a separate element. It isn’t the page header! That’s something different, and you’ll put it in the tags with the rest of your content. is only for metadata, which is stuff that you put in to tell browsers and search engines stuff about your site, like what character set to use, keywords to help searches find your site, and how to find your CSS file.

So, what can you put in the ?

Elements!

Here’s the basic structure of most elements: an opening tag, like

, then some content, like some text or images, then a closing tag, like

. Closing tags have that slash before the letters. It tells the browser that that’s the end of the element (the end of the paragraph, in this case). There are a few elements that only need one tag, like the charset declaration in the head, or image elements, but most need two!

You can have elements inside elements, and that works like this:

Here’s a link!

You never do it like this:

Here’s a link!


Always nest elements inside each other, don’t let them cross through each other like that!

Meet Some Elements

Here are a few elements to get you started. There are a lot of elements, and you can find out how all of them work from w3cschools.com
, but here are the ones you probably want at first. They’re all linked to their respective W3C Schools pages, so just go there to find out how they’re used. Everything has examples and stuff!

Divs and other styling boxes

and other semantic elements

These elements are just boxes to put your stuff in so you can style them up later. Like,

is for the header in your design, that shows up at the top of the page. It’s an invisible box at first, but you can use CSS to paint the box different colors, or change its size, add borders, stuff like that.

These are like the semantic elements, but they’re custom! You can give them classes, for when you have a bunch of divs to style the same way, like

, or you can give them IDs, for when you want there to be only one div in that style, like

.

Stuff you put text in

These are also referred to as header elements, but they’re not just boxes. You put text inside, and the browser recognizes that it’s a header and styles it accordingly. By default, h1 is huge and h6 is pretty small (but still bold, so it’s different than other text). Here’s what my blog’s styling turns them into:

h1

h2

h3

h4

h5

h6

Paragraph tag. Pretty straightforward!

    ,

      ,

1. 2. 3. “ordered” lists, bullet-point “unordered” lists, and the list items you put in them, respectively


Links (they need an href=”linkurl.com” to work tho, so your browser knows where it’s supposed to go)

Other stuff


This makes a line across the page. Sounds weird, but sometimes you need it.

Uhhh it’s getting close to class time, so I’m going to leave this here. I’ll add more to this later, and there should be a CSS and maybe even a JS post soon.

Happy hacking!

稿源:Let's Go Larval (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Hacking for Designers #1: HTML

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录