웹 사이트를 만드는 방법, 2 부, HTML에서 0으로 완전히 만든 사이트, 이미지 갤러리가있는 CSS-비디오 자습서

, 웹 사이트 개발 :이 튜토리얼은 모든 단계를 포함하는, HTML 및 CSS를 사용하여 사이트를 설명
무료 호스팅에 계정을 만들고 마지막으로 그 호스팅에 파일을 우리의 웹 사이트를 업로드, 무료 호스팅은 몇 분 이내에 온라인 웹 사이트를 퍼팅의 빠른 방법이며,이 방법의 단점은 우리가 가지고있는 것입니다 일부 광고는 항상 표시 상단 (위 헤더).

웹 사이트를 열고 싶은 사람, 당신은 (HTML의 전문가가 될 필요가 없습니다, HTML과 CSS를 알아야합니다Hyper T내선 MArkupe Language), 그러나 일부 코드 정보는 이러한 것들이 어떻게 작동하는지 이해하는 데 절대적으로 필요합니다.

당신이 하나의 사이트를 구축하는 경우에도 오류 또는 변경의 성과를 주기적으로 보정을 필요로하는 파일을 통해 무슨 일이 일어나고 있는지 아무 생각합니다.

많은 사람들이 코드, 상형 문자와 유사한 코드를 많이 사용합니다. 누군가가 한 번 이렇게 말했습니다. 키보드와 마우스 만있는 가상 세계.

우리는 오랫동안 소프트웨어 회사에서 개발 한 응용 프로그램을 사용했으며 컴퓨터 작업 만했으며 프로그래밍을 할 시간입니다. 실제로 프로그래밍 언어가 아니라 "마크 업 언어"입니다. 그것은 꽤 이상한 "마크 업 언어"처럼 들리기 때문에 프로그래밍 언어와 같습니다 .HTML은 오늘날 사용되는 가장 쉬운 프로그래밍 언어 중 하나입니다 (마크 업). 우리는 어느 사이트에서나 HTML을 봅니다. 그것들은 HTML의 구성 요소입니다.이 프로그래밍 언어는 어디에나 있습니다. 이제 배울 시간입니다.

처음 덜 위협이 될 수 있지만, 당신은 당신이하지 모든 것이 그렇게 어려운 간단하고 아름다운 일이, 우리는 우리의 손으로 뭔가를 만드는 것을 바로 이해보다주의 경우, 그 가장 중요한 일이다.

우리는 우리가 웹 페이지에 텍스트를 입력하기 위해 우리가 준비하고 텍스트 색을 것입니다, 우리는 페이지 스타일의 CSS (CSS 스타일 시트) 우리는 페이지의 모든 요소를 ​​배치 할로를 사용하는 방법, 기초를 배우게됩니다 당신이 우리의 웹 사이트에 배치합니다 모든 있도록 HTML은 한 조각처럼 보이도록한다.

이러한 HTML과 CSS의 기본 일이 있지만 당신은 즐거운 개요를 만들 것입니다, 간단한 기술, 기본적인 HTML과 CSS를 배우게됩니다.

당신이 관심과 인내로 자신을 무장해야이 튜토리얼이 튜토리얼은 우리가 당신은 매우 중요한 것을 놓칠 수 있습니다 당신이 나중에 더 이상 볼 의미가됩니다 스크롤 몇 초간 경우, 작은 계속 감당할 수있는 뭔가 농도 아니다 정보가 매우 높고, 나는 매우, 매우 조심하도록 요청 이유입니다.

이 튜토리얼, 내가 말할 것도 집중 과정 후, 당신은 당신이 잘 코드를 제어 할 수있는 HTML과 CSS 더 좋은 생각을해야합니다 그리고 당신은 완전히 HTML은 heroglife의 배열이 아닌 느낌, HTML 문서를 이해 분산합니다, 당신은 당신이 HTML이나 CSS 하나를 볼 때 그것이 무엇인지 알고있다.

우리는, 우리가 그들 모두를 기억할 필요가 없습니다, 걱정하지 마세요, 당신은 HTML 문서에 사용할 수 있습니다 여기에 태그 (태그)의 예를 태그 (태그)에 대해 배울 것입니다, 당신은 첫 번째 테이블에서 바로 기초를 배울 필요 당신이 그들을 필요로 할 때 나머지는 사이트 또는 인터넷에서 여기에서 찾을 수 있습니다.

심지어 테이블은 HTML을 사용하여 만든, 이러한 태그를 정렬됩니다.

기본 요소 (태그).

파일 형식 웹 정의
문서 헤더
Tilul 문서
HTML 페이지 체
BGCOLOR = 페이지의 배경색
TEXT = 페이지의 텍스트 색상
LINK = 방문하지 않은 링크 색상 페이지
VLINK = 페이지 방문 링크 색상
ALINK = 클릭 사용자 exacutat 동안 링크 색상
배경 = URL 배경 이미지 페이지
<Hn> <Hn> 문서 수준의 자막 (n = 1-6)
프레임이 텍스트의 특정 속성
SIZE =n 텍스트 크기는 1-7입니다
FACE ="A, b" 글꼴을 지정합니다 : a가능한 경우, 또는 b
COLOR =s 텍스트 색상 : 색 이름 또는 RGB 값 중
줄 바꿈
정보는 사전 포맷
HTML Comenatriu
페이지에서 자료 센터
가로 눈금자
SIZE =x 픽셀 눈금자 높이
WIDTH =x 픽셀 비율에 눈금자 폭
NOSHADE 가로 눈금자에 대한 그림자의 표시를 해제
ALIGN =x 페이지에 맞춤 가로 눈금자 (왼쪽, 중앙, 오른쪽)
COLOR =x 색상 가로 눈금자 (IE 전용)
마크 형 앵커
HREF =URL 하이퍼 텍스트 참조
HREF =# NAME 내부 앵커 참조
이름 =이름 내부 앵커 정의

목록에 항목 .

설명 정의
목록 형식 정의
정의 내
기능 목록
<OL 정렬 된 목록 (번호가 매겨진)
TYPE = 번호를 입력합니다. 가능한 값 :, A, I, I, 1
시작 =x 목록의 시작 번호는 주문
<UL 정렬되지 않은 목록 (들)
TYPE =형태 마킹의 형태. 가능한 값 : 원형, 사각, 디스크입니다.

문자 서식 요소 .

굵게 텍스트를 붙여 넣습니다
이탤릭체로 텍스트를 붙여 넣습니다
강조 표시된 텍스트 붙여 넣기
텍스트 글꼴 미니 밴
bibliogarfica 견적
프로그램 목록
논리적 스타일 강조
키보드의 텍스트
강력한 논리를 강조
프로그램 또는 변수
<베이스폰트 SIZE = n> 페이지의 기본 글꼴 크기를 지정합니다

프레임 요소 .

쓰기 페이지를 정의
COLS =x 컬럼의 수와 상대 크기
ROWS =x 수와 라인의 상대적 크기
BORDER =x FRAMESET 프레임의 "켜기"또는 "끄기"상태를 지정합니다 (1 또는 0)
Frameborder = x 프레임 크기를 지정합니다
=를 Framespacing x 인접한 두 프레임 사이의 간격
특정 프레임 워크의 정의
SRC =URL URL 소스 프레임 워크
=를 NAME이름 프레임 이름 (TARGET = 이름과 함께 앵커 마크의 일부로 사용됨)
=를 스크롤SCRL 옵션 가능 derulare.Valori 모음을 정의합니다 (사용), 해제 (비활성화), 자동 (자동)에
Frameborder =x 프레임 크기에 테두리
Marginheight =x 특정 프레임 워크의 위와 아래에 여분의 공간
Marginwidth =x 주어진 프레임의 왼쪽과 오른쪽에 추가 장치 공간
프레임을 볼 수없는 사용자를위한 섹션 표시된 페이지
내부 프레임 ((IE 용)
SRC =URL 소스 프레임 워크
=를 NAMEs 이름 창 (TARGET에 유용)
HEIGHT =x 임베디드 높이
WIDTH =x 임베디드 프레임 폭

테이블의 항목 .

HTML 표
BORDER =x 상자에 표
=를 Cellpaddingx 테이블 셀 내의 추가 공간
=를 Cellspacingx 테이블 셀 사이에 여분의 공간
WIDTH =x 폭 테이블을 부과
FRAME = 테이블의 미세 조정
규칙 = 테이블 통치자의 미세 조정
BorderColor가 = 테두리 색 테이블을 지정
BORDERCOLORLIGHT = 지정된 두 색상의 밝은 색상
BORDERCOLORDARK = 지정된 두 색상의 어두운 색
ALIGN =왼쪽 (left) 페이지의 왼쪽에 표를 정렬 및 텍스트가 오른쪽 흐름
ALIGN =연락해주세요 페이지의 오른쪽에 표를 정렬하고, 텍스트는 왼쪽으로 흐른다
HSPACE =x 테이블 주위 추가적인 단위 가로 공간
VSPACE =x 테이블 주위 추가적인 장치 수직 공간
COLS =x 테이블의 열 수를 지정
마크 업을 사용하여 열 정의 세트를 정의합니다.
<COL WIDTH =x> 픽셀 열 너비를 정의
표 제목을 정의
테이블 본문을 정의
선 표
BGCOLOR = 전체 라인의 배경 색상을 지정합니다
ALIGN =조정 현재 행 (왼쪽, 중앙, 오른쪽)의 셀을 정렬
테이블 데이터의 셀
BGCOLOR = 셀 데이터의 배경 색상을 지정합니다
COLSPAN =x 현재 셀 데이터에 걸쳐 열 수
ROWSPAN =x 현재 셀에 걸쳐 데이터 라인의 수
ALIGN =조정 가능한 date.Valori 세포 (왼쪽, 오른쪽, 가운데)의 구조를 정렬
=를 VALIGN조정 가능한 세포 물질 date.Valori의 수직 정렬 (위쪽, 아래쪽, 가운데)
배경 =URL 표 셀의 배경 이미지를 지정
넘김 셀 내의 텍스트의 분리 라인을 허용하지 않습니다
ALIGN =기준 인접한 텍스트 기준선 데이터 셀을 정렬
ALIGN =문자 열을 특정 문자에 맞 춥니 다 (기본 문자는 ".").
ALIGN =정당화 텍스트의 왼쪽과 오른쪽 양쪽 가장자리의 가장자리를 맞 춥니 다

이미지 요소를 추가합니다.

<IMG 표시 입력 이미지
SRC =URL 원본 그래픽 파일
ALT =본문 필요한 경우 표시 할 대체 텍스트
ALIGN =조정 페이지의 이미지 정렬. 가능한 값은 최고 (TOP), 가운데 (가운데), 왼쪽 아래 (아래), (왼쪽), 오른쪽 (오른쪽)
HEIGHT =x 이미지 높이 (픽셀)
WIDTH =x 이미지 너비
BORDER =x 그것은 하이퍼 링크로 사용되는 이미지 주변의 프레임
HSPACE =x 이미지 주변에 추가로 가로 공간 (픽셀)
VSPACE =x 이미지 주변의 추가 세로 공간 (픽셀)

요소 양식.

활성 HTML 양식
ACTION =URL 데이터를받는 서버에서 CGI 프로그램
METHOD =방법 데이터는 (GET 또는 POST) 서버로 전송하는 방법
<입력 텍스트 필드 또는 기타 입력
TYPE =선택권 입력 필드 유형 . 가능한 값 : 텍스트, 암호, 확인란, 숨김, 파일,
라디오, 재설정, 이미지를 제출합니다.
=를 NAME이름 값 필드의 기호 이름
VALUE = 텍스트 필드의 기본 내용
CHECKED = 선택권 버튼 / 상자에 기본값으로 표시
SIZE =x 텍스트 필드의 문자 수
SIZE =x 허용되는 문자의 최대 수
그룹 확인란
=를 NAME이름 값 필드의 기호 이름
SIZE =x 한 번 표시되는 메뉴 항목의 수 (기본값 = 1)
MULTIPLE =x 수 있도록 여러 메뉴 항목의 선택
<옵션 분야에서의 특별한 선택
VALUE = 메뉴의 선택의 결과 값
여러 줄에 보강 캠프 텍스트
=를 NAME이름 값 필드의 기호 이름
ROWS =x 텍스트 상자의 줄 수
COLS =x 텍스트 상자의 줄 당 열 수 (자)
논리적 인 부분으로 공유 양식
필드의 집합 관련 이름 (FIELDSET)
ALIGN =s 전설의 정렬 (설명) 표시 지정 (위쪽, 아래쪽, 왼쪽, 오른쪽)
TabIndex를 =x 요소의 순서를 지정하면 사용자가 Tab 키를 누르면
ACCESKEY =c 지정 즉, 특정 요소의 키보드 바로 가기 키를 제공합니다
DISABLED 요소는 비활성 상태이지만, 화면에 표시됩니다
읽기 전용 항목이 화면에 표시되지만 편집 할 수 없습니다

고급 요소입니다.

모델 스타일에 대한 자세한 정보
TYPE = 스타일 모델의 유형입니다. 보통 "text / css"
일반적으로 웹 페이지에 자바 스크립트를 포함
LANGUAGE =언어 사용하는 언어
EVENT =행사 특정 스크립트의 실행을 트리거 이벤트
= FORnumeobiect 스크립트가 작동하는 페이지 개체 이름

테이블 HTML 태그를 DOWNLOAD

http://www.videotutorial.150m.com : 당신이 자습서에서 만든 확인하려는 경우, 당신은이 주소에 액세스 할 수 있습니다.

우리는 첨부 파일을 압축 해제하고 메모장을 사용하여 세 개의 HTML 파일이나 CSS 파일을 공부하는 것이 좋습니다 + + 또는 변경 CAU을 할 수있는이 방법으로 웹 페이지를 편집하는 다른 프로그램도 그 동안 메모를 만들 수 있습니다 당신은 당신이없는 HTML 배울 것 계정.

내가 당신을 원하는 쾌적하고이 시리즈 및 이후에 다음 자습서에서 당신을 환영합니다.

다운로드 한 파일 테스트

단 콘스탄틴에 의해 실시
tutorialegimp.blogspot.com
크리스티안 Cismaru: IT & C와 관련된 모든 것을 좋아하고, 매일 축적하는 경험과 정보를 공유하고 싶습니다. 나는 당신을 가르치는 것을 배우고 있습니다!

보기 댓글 (333)

  • 이 튜토리얼의 정보의 아주 좋은, 톤.
    이 자습서는 호출 할 수 있습니다 : 주입 HTML과 CSS를.
    어쩌면 당신은 한 시간 정도 여기에서 배울 수있는 몇 개월에서 배울 수 없어요, 내가 게시되기 전에 모두를 본 적이 그리고 난 그 날 인용 정보 자습서에 들어갈 수있는 인상을 말할 수있다.
    한 지점에서 난 그냥 자습서를 시청하더라도 물을 마실 필요를 느꼈다 않으며, 내가 생각하고 싶지 않았다 인용 댄은 그 후 물을 마셨다.
    이 튜토리얼 후 HTML 및 / 또는 CSS를 배울 수없는 무언가가있다.

  • 크리스티 - 관리자이 튜토리얼의 정보의 아주 좋은, 톤.
    이 자습서는 호출 할 수 있습니다 : 주입 HTML과 CSS를.
    어쩌면 당신은 한 시간 정도 여기에서 배울 수있는 몇 개월에서 배울 수 없어요, 내가 게시되기 전에 모두를 본 적이 그리고 난 그 날 인용 정보 자습서에 들어갈 수있는 인상을 말할 수있다.
    한 지점에서 난 그냥 자습서를 시청하더라도 물을 마실 필요를 느꼈다 않으며, 내가 생각하고 싶지 않았다 인용 댄은 그 후 물을 마셨다.
    이 튜토리얼 후 HTML 및 / 또는 CSS를 배울 수없는 무언가가있다.

    네, 네 말이 맞아, Cristi, 하지만 네가 튜토리얼을 만들 거라고 생각해서 실망했어 :( 어쨌든 잘했어, 아주 좋은 튜토리얼

    • 당신이 한 말은 좋지 않은데 솔직히 말해서 이 남자는 처음부터 웹 사이트를 만드는 방법을 가르치기 위해 약 한 시간 반 동안 고군분투했는데 당신은 그가 그것을 하지 않았기 때문에 실망했다고 말합니까? 그 남자가 우리 각자에게 html과 css의 기초를 가르치기 위해 얼마나 많은 일을 했고 얼마나 많은 시간을 낭비했는지 상상이 가십니까? 당신 같은 쓸데없는 댓글은 다른 사람이 넣지 않은 것에 실망하고, 이 튜토리얼을 만들었습니다. 배울 점이 있다는 것에 감사하십시오 ;)

  • 부리:
    예 당신 말이 있습니다 만, 크리스티는 tutorialu을 다하겠습니다 생각하기 때문에 유감 어쨌든 아주 좋은 단 브라보 tutorialu

    "웹 사이트를 만드는 방법"에 대한 시리즈가 끝났다고 생각하십니까?
    다음 튜토리얼에서 나는 내게 될 것입니다.
    나는 댄 만든이 자습서를 시청하실 수 있습니다. 필요한 모든 것을 다음 튜토리얼 때문에
    내가 제시하는 것은 내가 아자 단을 실현 튜토리얼 다르지만의 정보는 사물의 올바른 이해를 위해 필수적인 것입니다.
    이 웹 콘텐츠를 게시하는 방법은 여러 가지가 있지만, 모두 당신은 아무것도 할 수없는 그들없이, 공통 분모, HTML과 CSS가 있습니다.

  • 크리스티 - 관리자:
    당신은에 시리즈를 종료 어떻게 생각하십니까 "웹 사이트를 만드는 방법."
    다음 튜토리얼에서 나는 내게 될 것입니다.
    나는 댄 만든이 자습서를 시청하실 수 있습니다. 필요한 모든 것을 다음 튜토리얼 때문에
    내가 제시하는 것은 내가 아자 단을 실현 튜토리얼 다르지만의 정보는 사물의 올바른 이해를 위해 필수적인 것입니다.
    이 웹 콘텐츠를 게시하는 방법은 여러 가지가 있지만, 모두 당신은 아무것도 할 수없는 그들없이, 공통 분모, HTML과 CSS가 있습니다.

    안녕하세요 크리스티, 나는 PHP 나 JS 일련의 비난?

  • 알렉스:
    안녕하세요 크리스티, 나는 PHP 나 JS 일련의 비난?

    우리는 모든 것에 대해 이야기뿐만 아니라, PHP와 HTML은 할 수없이 JS 사이트 HTML에 바인딩합니다.
    PHP는 데이터베이스에서 데이터를 추출하는 데 더 많이 사용되며 웹 페이지는 여전히 HTML을 기반으로 합니다. 동적 사이트(php, dhtml, asp, jsp, cf)에 대해 이야기하든 정적 사이트에 대해 이야기하든 HTML 언어 없이는 아무것도 할 수 없습니다.
    많은 사람들이 "더 이상 HTML 사이트를 원하지 않고 동적 PHP 사이트를 원합니다"라고 크게 혼동합니다. 이는 큰 실수입니다. 동적 사이트 또는 정적 사이트에 관계없이 거의 모든 곳에서 HTML이 사용됩니다.
    JS (자바 스크립트) 서버에 따라 JSP (자바 서버 페이지)와 동일하지 않습니다, JS 사이트는 특정 스크립트, 모든 서버에 대한 필요성에 사용되는, JS 스크립트가 필요없이 브라우저에서 실행할 수 있습니다 서버 구성 요소는이 튜토리얼에서, 댄 JS를 사용 해제 물건 스크립트 JS (사진 갤러리)의 시리즈를 사용하여 전체 웹 사이트 JS로가 대신 Java를 사용하여 전체 사이트입니다 그들은 같은 것하지만 할 서버 페이지는 다른 무언가이다.
    나는 당신이 오래 전에 "코드"를 공부하기 시작했다는 것을 알고 있습니다. 이 튜토리얼은 훌륭한 도움이 됩니다. Dan은 이 튜토리얼을 훌륭하게 수행했습니다. 이 튜토리얼이 얼마나 가치있는지 깨닫지 못할 것입니다. HTML에서 사용되는 태그(요소), 특히 각 태그에는 설명이 있으므로 사용할 수 있습니다.
    암호를 해독하여 ALEX을하지 않습니다, 그것은 기반으로합니다.
    날 믿어, 당신은 잠재적 인 NO를 그리워!

  • 와우, 누구나 이해할 수 있도록 많은 정보가 잘 구성되어 있습니다. 저는 새로운 것을 배우기 위해 개인적으로 튜토리얼을 보았고, 튜토리얼을 진행하면서 웹 사이트를 실제로로드하지 않고 만드는 것이 얼마나 쉬운 지에 놀랐습니다. 눈이 매우 즐겁습니다. 이 튜토리얼뿐만 아니라 다른 모든 튜토리얼도 축하합니다. 정보가 포함된 다음 "주입"(Cristi의 표현)을 기대합니다.

  • 안녕하세요.. 튜토리얼 정말 멋지고 정보도 많고.. 당시 넷이 없었기 때문에 도서관에서 책으로 수십번의 테스트를 하면서 Frontpage 98에서 기본 html을 배워야 했던 것 같습니다. 그리고 이제 내가 알아야 할 모든 것을 설명하는 튜토리얼을 볼 수 있습니다.. 내가 진화했음을 알 수 있습니다 :))).. 단계별로 설명되어 있고 웹 사이트에 모두 게시되어 있다는 사실이 마음에 들었습니다. 기본 명령어 + 연습할 수 있는 예제.. 당신이 무엇을 하고 있는지 알 수 있습니다, 당신은 진정한 선생님입니다!!
    그러나 자동 주문 및 내 질문을 프로그램을 사용하여 웹 디자인 작업 사람들의 대부분은 튜토리얼에게 이러한 프로그램을 할 것입니까?
    나는 당신이 명령을 이해하고 따라서 웹 디자인 프로그램을 더 잘 이해하기 위해 이 튜토리얼을 만들었다는 것을 알고 있습니다. 누군가가 Dan이 만든 것과 같은 튜토리얼에 대해 지루하다고 생각한다면, 이 기회에 튜토리얼을 축하합니다...

관련 포스트

이 웹 사이트는 쿠키를 사용합니다.