30 개의 믿을 수 없을 정도로 간단한 웹 페이지

가장 유명한 페이지 중 일부는 정보로 가득 차 있지만 저는 그 반대 인 단순한 페이지를 선호합니다.

분명히이 그룹의 가장 큰 지수는 여행을 시작한 이래로 미니멀 한 홈페이지를 갖춘 Google입니다. 그러나 분명히 인터넷에서 일을 단순하게 유지하기 위해 노력하는 유일한 사람은 아닙니다.

간단한 HTML 웹 페이지 예

킨 리치몬드

Kean Richmond는 몇 가지 요소로 연주하는 단순함을 보여 주지만 미니멀리즘에 좋은 느낌을 주다. 왼쪽 상단의 그의 로고, 오른쪽과 중앙의 Twitter 및 연락처 아이콘, 눈에 띄는 타이포그래피로 그가 헌신 한 것입니다.

웹에 연결 : 킨 리치 몬드

앨리스 드루 가드

앨리스 드루 가드 로고를 배치하여 간단하게 유지하십시오. 중앙에는 웹 사이트의 메인 페이지와 적절하게 배치 된 일련의 사진 사이를 이동할 수있는 XNUMX 개의 탭이있어 사용자가 무엇을하고 무엇을하는지 한눈에 알 수 있습니다.

웹에 연결 : 앨리스 드루 가드

조나단 오그 던

오그 덴 당신의 이름이 얼마나 단순한 로고인지 계속 놀아보세요, 눈에 띄지 않고 바로 아래에 위치한 소셜 네트워크와 디자인 작업을 통해 빠르게 살펴볼 수 있습니다. 한 페이지에 중요한 모든 것이 표시됩니다.

웹에 연결 : 조나단 오그 던

되새 류

Finch는 이미 다른 곳에서 타이포그래피와 우아함과 지혜를 나타내는 색상. 몇 가지 요소만으로 그는 모든 전문성을 고려합니다. 또한 어떤 페이지가 귀하에게 링크되었는지 명확하게 보여줍니다.

웹에 연결 : 되새 류

다른 디자인

이 웹 사이트 다르게 플레이. 메인 페이지, 휴대 전화 및 소셜 네트워크 링크로 이동할 수있는 헤더가있는 배경 화면을 사용하세요.

웹에 연결 : 다른 디자인

브리즈크

Kai는 자신의 모습으로 우리를 설명합니다. 추상 삼각형과 적절한 색상 팔레트 친밀감을주기 위해. 그는 또한 우리가 그에 대해 더 많이 알고 싶을 경우를 대비하여 더 작은 글꼴로 그의 바이오의 일부를 제공합니다.

웹에 연결 : 브리즈크

수직 정원 디자인

이전과 마찬가지로 Vertical Garden Design은 빠르게 보여주는 사진을 향합니다. 오슬로 공항에서 그의 최고의 직업 중 하나. 상단에는«내비게이션 바»또는 내비게이션 바가있는 헤더가 있으며 언어를 변경할 수도 있습니다. 로고는 세로 형식으로 배치하여 매우 간단한 페이지에 최종 터치를 제공합니다.

웹에 연결 : 수직 정원 디자인

247 그 라드

247 그 라드 단색 및 배경 이미지로 재생 거의 완전히 어둡습니다. 텍스트와 헤더보다 작은 헤더 글꼴은 전체 디자인에서 큰 대비를 만들기 위해 대문자로 표시됩니다.

웹에 연결 : 247 그 라드

이걸 즐겨라.

우나 훌륭한 타이포그래피는 진정성있는 표시가 될 수 있습니다. 우리가하는 일을 알고 있습니다. 메시지가 직접적이라면 더 이상 줄 필요가 없습니다. 그들은 아름다운 앱과 웹 사이트를 만드는 것을 좋아합니다. 그들은 프로젝트와 연구에 대한 메일을 다른 링크에 남겨 둡니다.

웹에 연결 : 이걸 즐겨라.

앨리슨 허우

앨리슨이 우리를 데려 간다 다른 과정 전에 더 많은 이미지를 포함 그리고 더 "여성스러운"서체. 메인 이미지와 헤더도 마찬가지입니다. 그는 쇼핑 트릭을 보여주는 카드를 제시하는 사치를 가지고 있습니다.

웹에 연결 : 앨리슨 허우

픽셀롯

Pixelot는 약간 미쳤지 만 저자의 창의성을 나타냅니다. 사용하다 마스크를 만드는 마우스 포인터 그것은 우리가 그것을 놓을 때마다 흐릿합니다.

웹에 연결 : 픽셀롯

라이오넬 학자

당신이 원하는 경우 그 이상으로 이력서를 온라인으로 만드십시오., Lionel이 단계를 보여줍니다. 적합한 글꼴, 왼쪽 상단의 사진, 소셜 네트워크 및 경험으로 연결됩니다. 유일한 장식 요소는 서로 다른 색상의 두 수평선입니다.

웹에 연결 : 라이오넬 학자

우아한 갈매기

우리는 돌아 간다 미니멀리즘의 우아함에 그리고 그 큰 공백. 한편으로 헤더는 나머지 요소와 매우 거리가 멀고, 다른 한편으로는 요소간에 시각적 조화를 이루는 방식으로 형성됩니다.

웹에 연결 : 우아한 갈매기

환경

모든 예에서 볼 수 있듯이 다른 페이지로 이동할 헤더 탭 웹 사이트에서. 타이포그래피는 매우 중요합니다. 하나는 머리글로, 다른 하나는 산세 리프가있는 텍스트로 플레이하십시오.

웹에 연결 : 환경

핑크포인트

색상의 대비는 모든 뷰의 약간 더 복잡한 웹으로 연결됩니다. 모든 주요 요소가 누락 된 것은 아닙니다. 이번에는 배경 이미지에 대한 그라디언트와 기본 이미지에 대한 그라디언트의 기본 색상이있는 두 섹션으로 재생합니다.

웹에 연결 : 핑크포인트

IWC

멋진 사진 잘 선택된 글꼴과 "영웅"요소 이 웹에 줄 수 있습니다. 슬라이더를 사용하면 작업의 일부가 개념 상 매우 간단하다는 것을 보여줍니다.

웹에 연결 : IWC

찹 찹

디지털 일러스트레이션을 통해 Chop Chop에 그것의 모든 시각적 존재를 잡아 먹는 이미지. 헤더의 파란색은 웹에 의해 투사되는 전체 이미지와 조화를 이루는 색채 값을 생성하는 포인트를 제공합니다.

웹에 연결 : 찹 찹

7 소나무

7Pine은 그린과 함께 홈 플레이트의 위대한 주인공이됩니다. 나머지는 그것을 구성 녹색이 많고 헤더가 간단한 이미지 로고가 눈에 띄지 않게하고 싶습니다.

웹에 연결 : 7 소나무

합계

합계는 우리를 다른 방향으로 인도합니다. 전설적인 흑백, 매우 창의적인 일러스트레이션으로 플레이하십시오. 나머지 요소와 두 가지 다른 삽화와 함께 흥미로운 풍경을 만들어냅니다. 나머지에서 눈에 띄는 웹 사이트를 만드는 예입니다.

웹에 연결 : 합계

모자 상자

파란색은이 웹 사이트에서 전체적으로 흰색으로 비춰진 이미지가 부족하지 않고 게임이 무엇인지에 대한 주된 색상입니다. 해당 사이트 빌더의 3D로 우리가 움직일 때 움직입니다.

웹에 연결 : 모자 상자

Kara lyte

카라가 자연스럽고 아름다운 존재감으로 단순함과 미니멀리즘 당신의 사진에서. 나머지는 헤더의 주요 요소와이를 여는 햄버거 버튼과 함께 제공되는 텍스트입니다.

웹에 연결 : Kara lyte

Instrinsic Studio 마케팅

Es 가장 단순한 웹 그러나 그것은 우리에게 블로그를 만드는 것이 무엇인지 보여줍니다. 빨간색과 검은 색은 매우 "블로그"사이트의 주인공입니다.

웹에 연결 : Instrinsic Studio 마케팅

HTML로 간단한 웹 사이트를 만드는 방법

우리는 당신을 가르 칠 것입니다 HTML로 간단한 웹 사이트 만들기 이를 구성하는 가장 기본적인 요소를 알 수 있습니다. 코드를로드하고 CSS에서 약간의 조정을 할 수있는 웹 호스트가 필요하지만, 이것이 HTML로 여정을 시작하는 원칙입니다.

일부 본 간단한 웹 예제 머리를 너무 많이 쓰지 않고 자신 만의 디자인을 만들 수 있도록 동기를 부여 할 수 있습니다. 때로는 단순한 것이 우리를 복잡한 일로 복잡하게 만드는 것보다 더 나은 효과를 만듭니다. 대부분의 경우 단순이 매우 잘 작동 함을 알 수 있습니다. 그것을 위해 가십시오.

HTML로 간단한 웹 사이트를 만드는 것은 처음에 보이는 것보다 쉽습니다. 웹 사이트 헤더, 본문으로 구성 또는 내용과 바닥 글 또는 바닥 글을 주요 요소로 사용합니다. 다음과 같이 분류 할 수 있습니다.

• 서류: 작성하려는 모든 문서는 . 우리는 그리고 항상
• 몸 또는 몸: 문서의 보이는 부분이 와이
• 헤더: 그들은 H1, H2, H3에 의해 알려져 있습니다 ... 우리는 그리고 우리는 . 내부에있는 텍스트는 헤더로 나타나며 번호 매기기에 따라 더 작거나 더 큰 크기로 표시됩니다.
• 단락: 단락이 와 닫힙니다
• 링크: 가장 명확한 예는 다음과 같습니다.creativosonline.org/»> 링크 Creativos Online
• 형상: 라벨로 정의합니다. . 예는 . 우리는 따옴표 사이의 이미지를 호출하고 SEO에 필수적인 대체 텍스트에 alt를 사용합니다.
• 목록: 우리는 목록을 다음과 같이 정의합니다. 지저분하고 깔끔하게. 목록 항목은 . 항상 바로 닫는 것을 잊지 마십시오.

이러한 요소로 우리는 간단한 웹 사이트를 만들기위한 기초 우리가 다음 섹션에서 여러분에게 가르 칠 것입니다. 가장 중요한 요소가있는 의미 구조가 다음과 같다고 가정 해 보겠습니다.

• 탐색 표시 줄이있는 헤더 사이트의 다른 페이지에 대해.
• 기사 또는 본문 공간 블로그 항목을 만들고 커리큘럼이나 이미지를 넣을 수 있습니다.
• 사이드 바 또는 사이드 바 추가 정보를 입력합니다.
• 바닥 글 또는 발, 여기에서 사이트의 가장 중요한 페이지와 소셜 네트워크의 아이콘에 대한 링크를 배치합니다 (항상 예로).

아래에서 볼 수있는 예는 모두 단순하지만 우아한 로고를 기반으로, 사이트의 여러 페이지에 대한 탐색을 배치하는 머리글, 텍스트 또는 이미지가 지배하는 중앙 공간 및 이전 단락에서 언급 한 요소가있는 바닥 글.

우리는 머리를 부러 뜨리지 말고 단순하게. 중요한 것은 이러한 영역이 시각적으로 몇 초 만에 나머지 영역과 구별된다는 것입니다. 시간이 지나면 우리는 자신을 복잡하게 만들고 더 많은 다른 공간에서 일할 수 있습니다.

입니다 HTML 코드의 명확한 예 가장 중요한 요소 :

<!DOCTYPE html>
<html lang='es'>
  <head>
    <meta charset='UTF-8'/>
    <title>HTML Semántico</title>
  </head>
  <body>

    <h1>Crear web es fácil!</h1>
    <ul>
      <li><a href='#'>Inicio</a></li>
      <li><a href='#'>Acerca de</a></li>
      <li><a href='#'>Blog</a></li>
      <li><a href='#'>Iniciar sesión</a></li>
    </ul>

  </body>
</html>

이 HTML 코드 줄로 우리는 먼저 헤더에 페이지 제목을 만들었습니다.,이 경우«Semantic HTML», 두 제목을 모두 닫습니다. , 헤더 그리고 우리는 몸을 여는 방법을 줄 것입니다. .

우리는 H1의 첫 번째 헤더 그것을 닫기 위해 , 사이트의 여러 페이지에 대한 탐색 모음을 만드는 데 도움이되는 목록으로 이동합니다. 목록을 닫습니다. , 우리는 닫습니다 그리고 마지막으로 HTML 문서 .

마지막으로, 항상 문서 열기 슬래시로 전체 코드의 끝에서 닫습니다. 문서를 연 후에는 항상 언어에 대한 참조가 사용됩니다.이 경우 스페인어는«es»와 함께 .

코드를 자세히 살펴보고 언제든 당신은 기능을 열고 막대로 닫습니다 해당.

약간의 CSS

CSS에 대해 조금 살펴 보지만 이해하도록 HTML 스타일링 방법. CSS와 HTML이 함께 사용되어 아래에서 찾을 수있는 간단한 웹 사이트를 제공한다고 가정 해 보겠습니다.

한편으로 헤더 또는 헤더, 기사 또는 이미지와 바닥 글이있는 본문 또는 본문에 대해 HTML의 의미 론적 사용이있는 경우, CSS에서«Div»기능을 사용하여 나중에 디자인에 필요한 변경 사항을 적용하기 위해 이러한 각 공간에.

다음과 같이 간단합니다.

Div로 스타일을 적용 할 수 있지만 적절하고 완벽한 구조가 도움이 될 것입니다 웹 크롤러가 콘텐츠에 대한 내용을 완벽하게 "읽을"수 있도록 기본 구조를 따르면 먼저 훌륭한 작업과 기반을 갖게됩니다.

Un 간단한 CSS 코드 예제:

h1 {
색: 화이트;
텍스트 정렬: 센터;
}

우리는 H1과 텍스트라고 부릅니다. 우리는 색상을 흰색으로 넣을 것입니다 : 흰색; «text align»을 사용하여 중앙에 정렬합니다. H1 호출을 연 후에는 항상 대괄호로 닫으십시오.

헤더 사진 그렉 라 코지